FlexGrid
Grouping
Features
Settings
Description
This sample shows grouping support in the FlexGrid. Most of the work is done by the CollectionView class used as a data source for the grid. You can config group description by GroupBy method in view. To add grouping by Javascript, add one or more GroupDescription objects to the collectionView.groupDescriptions property. And ensure that the grid's showGroups property is set to true.
You can customize the text that is displayed in group header rows using the grid's groupHeaderFormat property. By default, this displays the name of the group, for example, ShipCountry, followed by the current group and the number of items in the group. Use the format property on each Column object to format aggregated data displayed in the group header for that column. Notice how we use the column's aggregate property to specify how to aggregate the data for each column.
using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // // GET: /Grouping/ public ActionResult Grouping() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"GroupBy", new object[]{"ShipCountry", "ShipCity", "ShipCountry and ShipCity", "Freight", "ShippedDate","None"}} } }; return View(); } public ActionResult Grouping_Bind([C1JsonRequest] CollectionViewRequest<Order> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, _db.Orders.ToList())); } } }
@model IEnumerable<Order> @{ ViewBag.DemoSettings = true; var controlId = (ViewBag.DemoSettingsModel as ClientSettingsModel).ControlId; } <c1-flex-grid id="@controlId" height="350px" is-read-only="true" show-groups="true" auto-generate-columns="false" group-by="ShipCountry"> <c1-items-source read-action-url="@Url.Action("Grouping_Bind")" page-size="50"></c1-items-source> <c1-flex-grid-column binding="OrderID" header="Id"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipCountry" header="Ship Country"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipCity" header="Ship City"></c1-flex-grid-column> <c1-flex-grid-column binding="ShippedDate" header="Shipped Date"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipAddress" header="Ship Address" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="Freight" header="Freight" format="c2" aggregate="Sum"></c1-flex-grid-column> </c1-flex-grid> <c1-pager owner="@controlId"></c1-pager> @section Scripts{ <script> function customChangeGroupBy(grid, name) { var groupDescriptions = grid.collectionView.groupDescriptions; grid.beginUpdate(); groupDescriptions.clear(); if (name.indexOf("ShipCountry") > -1) { groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShipCountry")); } if (name.indexOf("ShipCity") > -1) { groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShipCity")); } if (name.indexOf("ShippedDate") > -1) { groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShippedDate", function (item, prop) { var value = item[prop]; if (!value) { return ""; } else { return value.getFullYear() + "/" + (value.getMonth() + 1); } })); } if (name.indexOf("Freight") > -1) { groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Freight", function (item, prop) { var value = item[prop]; if (value <= 50) { return "0 to 50"; } if (value > 50 && value <= 100) { return "50 to 100"; } if (value > 100 && value <= 150) { return "100 to 150"; } return "More than 150"; })); } grid.endUpdate(); } </script> } @section Description{ <p>@Html.Raw(FlexGridRes.Grouping_Text0)</p> <p>@Html.Raw(FlexGridRes.Grouping_Text1)</p> }