Features
- Overview
- Collapsible Column Headers
- Styling Records, Groups, and Cells
- Grouping
- Group Headers
- Row Header
- Filtering
- Row and Column Freezing
- Paging
- Group Panel
- Remote Data Binding
- Custom Cells
- Custom Editors
- Custom Column Headers
- Editing
- Batch Editing
- Sorting
- Virtual Scrolling
- Disable Server Reading
- Data Map
- Excel Export
- PDF Export
- Unobtrusive Validation
Grouping
Grouping
This sample shows grouping support in the MultiRow.
Features
Ordered
Shipped
City
State
Zip
Express
ID
Customer
Customer Email
Shipper
Amount
Address
Customer Phone
Shipper Email
Ordered
Shipped
City
State
Zip
Express
0
loading...
Settings
Group By: Customer State
Show Groups: True
Description
This sample shows grouping support in the MultiRow. 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 MultiRow's ShowGroups property is set to true.
You can customize the text that is displayed in group header rows using the MultiRow's GroupHeaderFormat property.
By default, this displays the name of the group, for example, State, followed by the current group and the number of items in the group.
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 | using MultiRowExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MultiRowExplorer.Controllers { public partial class MultiRowController : Controller { // // GET: /Grouping/ public ActionResult Grouping() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary< string , object []> { { "GroupBy" , new object []{ "Customer State" , "Customer City" , "Customer State and Customer City" , "Ordered Date" , "Shipped Date" , "Amount" , "None" }}, { "ShowGroups" , new object [] { true , false } } } }; return View(); } public ActionResult Grouping_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData) { return this .C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders())); } } } |
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 | @model IEnumerable< Orders.Order > @ { var cities = Orders.GetCities().ToValues(); ClientSettingsModel settings = ViewBag.DemoSettingsModel; ViewBag.DemoSettings = true ; } @section Scripts{ <script> function collapseAllGroups() { var mr = wijmo.Control.getControl( "#@settings.ControlId" ); mr.collapseGroupsToLevel(0); } function expandAllGroups() { var mr = wijmo.Control.getControl( "#@settings.ControlId" ); mr.collapseGroupsToLevel(10); } </script> } < input type = "button" value = "@Html.Raw(MultiRowRes.Grouping_Text2)" class = "btn" onclick = "collapseAllGroups()" /> < input type = "button" value = "@Html.Raw(MultiRowRes.Grouping_Text3)" class = "btn" onclick = "expandAllGroups()" /> < c1-multi-row id = "@settings.ControlId" class = "multirow" is-read-only = "true" group-by = "Customer.State" show-groups = "true" > < c1-items-source read-action-url = "@Url.Action(" Grouping_Bind ")" disable-server-read = "true" ></ c1-items-source > < c1-multi-row-cell-group header = "Order" colspan = "2" > < c1-multi-row-cell binding = "Id" header = "ID" class = "id" colspan = "2" /> < c1-multi-row-cell binding = "Amount" header = "Amount" format = "c" class = "amount" colspan = "2" /> < c1-multi-row-cell binding = "Date" header = "Ordered" /> < c1-multi-row-cell binding = "ShippedDate" header = "Shipped" /> </ c1-multi-row-cell-group > < c1-multi-row-cell-group header = "Customer" colspan = "3" > < c1-multi-row-cell binding = "Customer.Name" name = "CustomerName" header = "Customer" /> < c1-multi-row-cell binding = "Customer.Email" name = "CustomerEmail" header = "Customer Email" class = "email" colspan = "2" /> < c1-multi-row-cell binding = "Customer.Address" name = "CustomerAddress" header = "Address" colspan = "2" /> < c1-multi-row-cell binding = "Customer.Phone" name = "CustomerPhone" header = "Customer Phone" /> < c1-multi-row-cell binding = "Customer.City" name = "CustomerCity" header = "City" datamap-editor = "@C1.Web.Mvc.Grid.DataMapEditor.DropDownList" > < c1-data-map display-member-path = "Value" selected-value-path = "Value" > < c1-items-source source-collection = "cities" /> </ c1-data-map > </ c1-multi-row-cell > < c1-multi-row-cell binding = "Customer.State" name = "CustomerState" header = "State" /> < c1-multi-row-cell binding = "Customer.Zip" name = "CustomerZip" header = "Zip" /> </ c1-multi-row-cell-group > < c1-multi-row-cell-group header = "Shipper" > < c1-multi-row-cell binding = "Shipper.Name" name = "ShipperName" header = "Shipper" width = "*" /> < c1-multi-row-cell binding = "Shipper.Email" name = "ShipperEmail" header = "Shipper Email" class = "email" /> < c1-multi-row-cell binding = "Shipper.Express" name = "ShipperExpress" header = "Express" /> </ c1-multi-row-cell-group > </ c1-multi-row > @section Settings{ <script> function customChangeGroupBy(grid, name) { var groupDescriptions = grid.collectionView.groupDescriptions; grid.beginUpdate(); groupDescriptions.clear(); if (name.indexOf( "Customer State" ) > -1) { groupDescriptions.push( new wijmo.collections.PropertyGroupDescription( "Customer.State" )); } if (name.indexOf( "Customer City" ) > -1) { groupDescriptions.push( new wijmo.collections.PropertyGroupDescription( "Customer.City" )); } if (name.indexOf( "Ordered Date" ) > -1) { groupDescriptions.push( new wijmo.collections.PropertyGroupDescription( "Date" , formatDateValue)); } if (name.indexOf( "Shipped Date" ) > -1) { groupDescriptions.push( new wijmo.collections.PropertyGroupDescription( "ShippedDate" , formatDateValue)); } if (name.indexOf( "Amount" ) > -1) { groupDescriptions.push( new wijmo.collections.PropertyGroupDescription( "Amount" , function (item, prop) { var value = item[prop]; if (value <= 1000) { return "0 to 1000" ; } if (value > 1000 && value <= 2000) { return "1000 to 2000" ; } if (value > 2000 && value <= 3000) { return "2000 to 3000" ; } if (value > 3000 && value <= 4000) { return "3000 to 4000" ; } if (value > 4000 && value <= 5000) { return "4000 to 5000" ; } return "More than 5000" ; })); } grid.endUpdate(); } function formatDateValue(item, prop) { var value = item[prop]; if (!value) { return "" ; } else { return value.getFullYear() + "/" + (value.getMonth() + 1); } } </script> } @section Description{ < p > @Html .Raw(MultiRowRes.Grouping_Text0)</ p > < p > @Html .Raw(MultiRowRes.Grouping_Text1)</ p > } |