FlexGrid
Custom Header Template
This sample shows the basic usage of the Custom Header Template.
Features
Sample
Financial table example.
Description
This example shows a table with financial data. The data contains two column groups, one showing fund performance and one showing fund composition.
Source
CustomHeaderTemplateController.cs
using System; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; #if !NETCORE30 && !NET50 using Microsoft.AspNetCore.Http.Internal; #endif using Microsoft.Extensions.Primitives; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public class DataRepresentation { public DataRepresentation(params string[] args) { name = args[0]; currency = args[1]; ytd = args[2]; m1 = args[3]; m6 = args[4]; m12 = args[5]; stock = args[6]; bond = args[7]; cash = args[8]; other = args[9]; } public string name; public string currency; public string ytd; public string m1; public string m6; public string m12; public string stock; public string bond; public string cash; public string other; } public partial class FlexGridController : Controller { private static List<DataRepresentation> _data = new List<DataRepresentation> { new DataRepresentation("Constant Growth IXTR", "USD", "0.0523%", "0.0142%", "0.0443%", "0.0743%", "0.17%", "0.32%", "0.36%", "0.15%"), new DataRepresentation("Optimus Prime MMCT", "EUR", "3.43%", "4.30%", "2.44%", "5.43%", "61%", "80%", "90%", "22%"), new DataRepresentation("Serenity Now ZTZZZ", "YEN", "5.22%", "1.43%", "4.58%", "7.32%", "66%", "9%", "19%", "6%") }; public ActionResult CustomHeaderTemplate_Bind([C1JsonRequest] CollectionViewRequest<DataRepresentation> DataRepresentation) { return this.C1Json(CollectionViewHelper.Read(DataRepresentation, _data)); } public ActionResult CustomHeaderTemplate(IFormCollection collection) { return View(); } } }
CustomHeaderTemplate.cshtml
@using C1.Web.Mvc.Grid @model IEnumerable<MvcExplorer.Controllers.DataRepresentation> @section Scripts{ <script> c1.documentReady(function () { var fg = c1.mvc.grid.FlexGrid.getControl("#fnFlexGrid"); var columns = fg.columns; for (var i = 0; i < columns.length; ++i) { columns[i].align = 'center'; } }); </script> } @{ var customHeader = new C1.Web.Mvc.HeaderTemplate(); customHeader.RowCount = 2; customHeader.Cells = new List<C1.Web.Mvc.HeaderTemplateCell>(); { customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 0, 2, 1, "Name")); customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 1, 2, 1, "Currency")); customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 2, 1, 4, "Performance")); customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 6, 1, 4, "Allocation")); }; } <h2 style="font:bold"> @Html.Raw(FlexGridRes.HeaderTemplate_Table_Description) </h2> <br /> <br /> <c1-flex-grid id="fnFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true" header-template="@customHeader" sorting-type="None" > <c1-items-source read-action-url="@Url.Action("CustomHeaderTemplate_Bind")"></c1-items-source> <c1-flex-grid-column binding="name" width="*" min-width="120"></c1-flex-grid-column> <c1-flex-grid-column binding="currency"></c1-flex-grid-column> <c1-flex-grid-column binding="ytd"></c1-flex-grid-column> <c1-flex-grid-column binding="m1"></c1-flex-grid-column> <c1-flex-grid-column binding="m6"></c1-flex-grid-column> <c1-flex-grid-column binding="m12"></c1-flex-grid-column> <c1-flex-grid-column binding="stock"></c1-flex-grid-column> <c1-flex-grid-column binding="bond"></c1-flex-grid-column> <c1-flex-grid-column binding="cash"></c1-flex-grid-column> <c1-flex-grid-column binding="other"></c1-flex-grid-column> </c1-flex-grid> @section Summary{ <p>@Html.Raw(FlexGridRes.HeaderTemplate_Sumary)</p> } @section Description{ @Html.Raw(FlexGridRes.HeaderTemplate_Description) }
Documentation