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.Collections; using System.Globalization; using System.Linq; using System.Web.Mvc; using C1.Web.Mvc; using MvcExplorer.Models; using System.Collections.Generic; using System; 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(FormCollection collection) { return View(_data); } } }
CustomHeaderTemplate.cshtml
@using C1.Web.Mvc.Grid @using C1.Web.Mvc @model IList<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> } <h2 style="font:bold"> @Html.Raw(Resources.FlexGrid.HeaderTemplate_Table_Description) </h2> <br /> <br /> @(Html.C1().FlexGrid().Id("fnFlexGrid") .Bind(Model) .AutoGenerateColumns(false) .SortingType(AllowSorting.None) .Columns(bl => { bl.Add(cb => cb.Binding("name").Width("*").MinWidth(120)); bl.Add(cb => cb.Binding("currency")); bl.Add(cb => cb.Binding("ytd")); bl.Add(cb => cb.Binding("m1")); bl.Add(cb => cb.Binding("m6")); bl.Add(cb => cb.Binding("m12")); bl.Add(cb => cb.Binding("stock")); bl.Add(cb => cb.Binding("bond")); bl.Add(cb => cb.Binding("cash")); bl.Add(cb => cb.Binding("other")); }) .HeaderTemplate(builder => { builder.RowCount(2); builder.Cells(c => { c.Set(0, 0, 2, 1, "Name"); c.Set(0, 1, 2, 1, "Currency"); c.Set(0, 2, 1, 4, "Performance"); c.Set(0, 6, 1, 4, "Allocation"); }); }) ) @section Summary{ <p>@Html.Raw(Resources.FlexGrid.HeaderTemplate_Sumary)</p> } @section Description{ @Html.Raw(Resources.FlexGrid.HeaderTemplate_Description) }
Documentation