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