FlexGrid
グループ化
機能
サンプル
設定
説明
このサンプルは、FlexGrid のグループ化のサポートを示します。作業のほとんどは、 グリッドのデータソースとして使用される CollectionView クラスによって行われます。 ビューの GroupBy メソッドを使用してグループ記述を設定できます。 JavaScript でグループ化を追加するには、1 つ以上の GroupDescription オブジェクトを collectionView.groupDescriptions プロパティに追加します。次に、 グリッドの ShowGroups プロパティが true に設定されていることを確認します。
グリッドの GroupHeaderFormat プロパティを使用して、 グループヘッダー行に表示されるテキストをカスタマイズできます。デフォルトでは、これには、 ShipCountry などのグループ名、およびその後に現在のグループと グループの項目数が表示されます。各 Column オブジェクトの Format プロパティを使用して、 その列のグループヘッダーに表示される集計データの書式を設定します。 列の Aggregate プロパティを使用して各列のデータの集約方法を指定している ことに注意してください。
ソース
GroupingController.cs
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())); } } }
Grouping.cshtml
@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> }
マニュアル