FlexGrid
Custom Header Template
This sample shows the basic usage of the Custom Header Template.
Features
Financial table example.
name
currency
ytd
m1
m6
m12
stock
bond
cash
other
Constant Growth IXTR
USD
0.0523%
0.0142%
0.0443%
0.0743%
0.17%
0.32%
0.36%
0.15%
Optimus Prime MMCT
EUR
3.43%
4.30%
2.44%
5.43%
61%
80%
90%
22%
Serenity Now ZTZZZ
YEN
5.22%
1.43%
4.58%
7.32%
66%
9%
19%
6%
Name
Currency
Performance
Allocation
ytd
m1
m6
m12
stock
bond
cash
other
0
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 | 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); } }} |
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 64 65 66 | @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)} |