FlexGrid
FlexGrid
Custom Footers
This sample shows how to extend FlexGrid to provide two types of footer elements.
Features
ID
Start
End
Country
Product
Color
Amount2
Discount
Active
$0.00
0%
ID
Start
End
Country
Product
Color
Amount2
Discount
Active
Σ
0
loading...
Description
This sample shows how to extend FlexGrid to provide two types of footer elements.
- Column Footer Rows: In some situations you may want to display non-scrollable rows below the grid data containing summary information such as subtotals. This can be done by the ShowColumnFooters(bool value = true, string rowHeaderText = null) method. The grid will automatically provide values for any columns that have the Aggregate property set. This is what this sample does.
- Group Footer Rows: When grouping is enabled, FlexGrid adds group rows above each group. This sample shows how you can add custom group rows below each group as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult CustomFooters() { return View(); } public ActionResult CustomFooters_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this .C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500))); } } } |
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | @model IEnumerable< Sale > @section Scripts{ <script> // class used to identify group footer rows var ROW_FOOTER_CLASS = 'wj-groupfooter' ; function grouping(groupBy) { var flex = wijmo.Control.getControl( '#grid' ), data = flex.collectionView; flex.beginUpdate(); data.groupDescriptions.clear(); var groups = groupBy ? groupBy.split( ',' ) : []; for ( var i = 0; i < groups.length ; i++) { data.groupDescriptions.push( new wijmo.collections.PropertyGroupDescription(groups[i])); } flex.endUpdate(); } function onLoadedRows() { var flex = wijmo .Control.getControl( '#grid' ); if (flex.collectionView.groupDescriptions.length) { addGroupFooters(); } } // add group footers function addGroupFooters() { var flex = wijmo .Control.getControl( '#grid' ); flex.beginUpdate(); for ( var r = 0 ; r < flex.rows.length; r++) { var row = flex .rows[r]; if (row instanceof wijmo.grid.GroupRow && row.cssClass != ROW_FOOTER_CLASS) { // create footer row to match this group row var newRow = new wijmo.grid.GroupRow(); newRow.level = row .level; newRow.cssClass = ROW_FOOTER_CLASS ; // add footer row to the grid var index = findFooterIndex (r); flex.rows.insert(index, newRow); // add some content to footer row var group = row .dataItem; flex.setCellData(index, 0, 'f(' + group.name + ')' , false ); } } flex.endUpdate(); } // find the index where the group footer should be inserted function findFooterIndex(r) { var flex = wijmo .Control.getControl( '#grid' ); var level = flex .rows[r].level; for ( var i = r + 1; i < flex.rows.length; i++) { var row = flex .rows[i]; if (row instanceof wijmo.grid.GroupRow) { // if this is *not* a footer and the level is <=, insert here if (row.cssClass != ROW_FOOTER_CLASS && row.level <= level) { return i; } // if this *is* a footer and the level is <, insert here if (row.cssClass == ROW_FOOTER_CLASS && row.level < level) { return i; } } } // insert at the bottom return flex.rows.length; } </script> } < style > .wj-control .wj-btn-group { border: 1px solid rgba(0, 0, 0, 0.2); } .wj-control .wj-btn-group * { color: black !important; } .wj-control .wj-btn-group > *:not(:first-child) { border-left: 1px solid rgba(0, 0, 0, 0.2); } .wj-control .wj-btn-group > .wj-btn.wj-btn- default :hover, .wj-control .wj-btn-group > .wj-btn.wj-btn- default :focus { background: #eee !important; } </ style > < label > @Html .Raw(FlexGridRes.CustomFooters_Text1)</ label > < div class = "wj-btn-group" > < button type = "button" class = "wj-btn wj-btn-default" onclick = "grouping('')" > @Html .Raw(FlexGridRes.CustomFooters_None)</ button > < button type = "button" class = "wj-btn wj-btn-default" onclick = "grouping('Country')" > @Html .Raw(FlexGridRes.CustomFooters_Country)</ button > < button type = "button" class = "wj-btn wj-btn-default" onclick = "grouping('Product')" > @Html .Raw(FlexGridRes.CustomFooters_Product)</ button > < button type = "button" class = "wj-btn wj-btn-default" onclick = "grouping('Product,Color')" > @Html .Raw(FlexGridRes.CustomFooters_ProductAndColor)</ button > </ div > < label > @Html .Raw(FlexGridRes.CustomFooters_Text2)</ label > < div class = "multi-grid" > < c1-flex-grid id = "grid" is-read-only = "true" auto-generate-columns = "false" show-groups = "true" class = "grid" loaded-rows = "onLoadedRows" show-column-footers = "true" > < c1-items-source disable-server-read = "true" read-action-url = "@Url.Action(" CustomFooters_Bind ")" ></ c1-items-source > < c1-flex-grid-column binding = "ID" width = "70" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Start" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "End" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Country" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Product" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Color" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Amount2" format = "c" aggregate = "Sum" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Discount" width = "100" format = "p0" aggregate = "Avg" ></ c1-flex-grid-column > < c1-flex-grid-column binding = "Active" width = "80" ></ c1-flex-grid-column > </ c1-flex-grid > </ div > @section Summary{ @Html .Raw(FlexGridRes.CustomFooters_Text0) } @section Description{ < p > @Html .Raw(FlexGridRes.CustomFooters_Text0)</ p > < ol > < li > @Html .Raw(FlexGridRes.CustomFooters_Li1)</ li > < li > @Html .Raw(FlexGridRes.CustomFooters_Li2)</ li > </ ol > } |