FlexGrid
FlexGrid
Custom Header Template
This sample shows the basic usage of the Custom Header Template.
Features
Financial table example.
Name
Currency
Performance
Allocation
ytd
m1
m6
m12
stock
bond
cash
other
name
currency
ytd
m1
m6
m12
stock
bond
cash
other
0
loading...
Description
This example shows a table with financial data. The data contains two column groups, one showing fund performance and one showing fund composition.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 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 !NETCORE31 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(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | @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) } |