In addition to hierarchical column headers, FlexGrid enables grouping related fields together. This provides you the ability to create collapsible column groups. This is done by setting the columns property (or the columnGroups property) to an array containing column definitions where the definitions contain a 'columns' collection of child columns. The column groups may be collapsible and configured to show any of the child columns when the group is collapsed by setting ColapseTo and IsColapsed properties of the column.
The following example demonstrates how you can create column groups by initializing the grid's column set as hierarchical columns.
Controller Code
| C# |
Copy Code
|
|---|---|
using <ApplicationName>.Models; namespace ApplicationName.Controllers { public class Portfolio { public Portfolio(string name, string currency, params double[] args) { Name = name; Currency = currency; YTD = args[0]; M1 = args[1]; M6 = args[2]; M12 = args[3]; Stock = args[4]; Bond = args[5]; Cash = args[6]; Other = args[7]; Amount = args[8]; } public string Name; public string Currency; public double YTD; public double M1; public double M6; public double M12; public double Stock; public double Bond; public double Cash; public double Other; public double Amount; } public partial class FlexGridController : Controller { private static List<Portfolio> _portfolios = new List<Portfolio> { new Portfolio("Constant Growth", "USD", 0.0523, 0.0142, 0.0443, 0.0743, 0.17, 0.50, 0.18, 0.15, 40500), new Portfolio("Optimus Prime", "EUR", 0.343, 0.430, 0.244, 0.543, 0.33, 0.17, 0.28, 0.22, 100000), new Portfolio("Serenity Now", "YEN", 0.522, 0.143, 0.458, 0.732, 0.15, 0.11, 0.35, 0.39, 255800), new Portfolio("Vina Capital", "VND", 0.418, 0.231, 0.356, 0.648, 0.25, 0.31, 0.19, 0.25, 116900), new Portfolio("Dragon Capital", "BTC", 0.116, 0.528, 0.451, 0.324, 0.15, 0.14, 0.71, 0, 278300) }; public ActionResult ColumnGroups(FormCollection collection) { return View(_portfolios); } } } |
|
View Code
| C# |
Copy Code
|
|---|---|
@model IEnumerable<ApplicationName.Controllers.Portfolio>
@{
const string tpl1 = "<span class=${value> .3 ? 'big-val' : 'small-val'}>${text}</span>";
const string tpl2 = "<span class=${value > 50000 ? 'big-val' : 'small-val'}>${text}</span>";
}
<c1-flex-grid id="colGroupsFlexGrid" auto-generate-columns="false" class="grid animated" is-read-only="true"
sorting-type="None" show-marquee="true" default-column-size="113" item-formatter="formatItem">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-grid-column binding="Name" width="130"></c1-flex-grid-column>
<c1-flex-grid-column binding="Currency" align="center" width="73"></c1-flex-grid-column>
<c1-flex-grid-column header="Performance" align="center" collapse-to="YTD">
<c1-flex-grid-column binding="YTD" format="p2" class="main-column"></c1-flex-grid-column>
<c1-flex-grid-column binding="M1" format="p2"></c1-flex-grid-column>
<c1-flex-grid-column binding="M6" format="p2"></c1-flex-grid-column>
<c1-flex-grid-column binding="M12" format="p2"></c1-flex-grid-column>
</c1-flex-grid-column>
<c1-flex-grid-column header="Allocation" align="center" collapse-to="Amount">
<c1-flex-grid-column header="Investment" align="center" collapse-to="Total" is-collapsed="true">
<c1-flex-grid-column binding="Stock" format="p2" template="@tpl1"></c1-flex-grid-column>
<c1-flex-grid-column binding="Bond" format="p2" template="@tpl1"></c1-flex-grid-column>
<c1-flex-grid-column binding="Other" format="p2" template="@tpl1"></c1-flex-grid-column>
<c1-flex-grid-column binding="Total" name="#Total" format="p2" align="right" class="main-column">
</c1-flex-grid-column>
</c1-flex-grid-column>
<c1-flex-grid-column binding="Cash" format="p2" template="@tpl1"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c0" class="main-column" template="@tpl2"></c1-flex-grid-column>
</c1-flex-grid-column>
</c1-flex-grid>
<style type="text/css">
.wj-flexgrid {
margin: 10px 0;
}
/* highlight the main column in the group */
.wj-flexgrid .wj-cells .wj-cell.main-column {
background: #ddffdd;
}
/* formatting for cell's templates */
.big-val {
font-weight: bold;
color: darkgreen;
}
.small-val {
font-style: italic;
color: rgb(202, 0, 0);
}
/* animation for collapsing/expanding the groups */
.wj-flexgrid.animated .wj-colheaders .wj-header.wj-cell.wj-colgroup {
transition: all .2s;
}
</style>
<script>
function formatItem(panel, r, c, cell) {
if (panel.cellType == 1) {
switch (panel.columns[c].name) {
case '#Total':
var item = panel.rows[r].dataItem,
value = item.Stock + item.Bond + item.Other,
cls = value > .3 ? 'big-val' : 'small-val';
txt = wijmo.Globalize.format(value, panel.columns[c].format);
cell.innerHTML = '<span class="' + cls + '">' + txt + '</span>'
break;
}
}
}
</script>
|
|
