FlexGrid
マスター/詳細
機能
サンプル
顧客:
選択された顧客のすべての注文:
説明
クライアント側 CollectionView は通貨を組み込みでサポートし、これによって FlexGrid でマスター/詳細シナリオを実装できます。currentItem を参照して、ページ内の任意の要素の連結ソースとして使用できます。
現在の項目が変更されたときは、詳細ビューを更新する必要があります。それには、currentChanged イベントにハンドラをアタッチし、必要に応じて詳細ビューを更新します。
現在の項目が変更されたときは、詳細ビューを更新する必要があります。それには、currentChanged イベントにハンドラをアタッチし、必要に応じて詳細ビューを更新します。
ソース
MasterDetailController.cs
using System.Linq; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // GET: /<controller>/ public ActionResult MasterDetail() { return View(_db.Customers.Take(10).ToList()); } public ActionResult DetailData([C1JsonRequest] CollectionViewRequest<Order> requestData) { string customerID = requestData.ExtraRequestData["CustomerID"].ToString(); return this.C1Json(CollectionViewHelper.Read(requestData, _db.Orders.Where(s => s.CustomerID == customerID).ToList())); } } }
MasterDetail.cshtml
@model IEnumerable<Customer> @section Scripts{ <script type="text/javascript"> var grid, cv, detail, cvDetail, currentItem; c1.documentReady(function () { grid = wijmo.Control.getControl("#Customer"); cv = grid.collectionView; cv.currentChanged.addHandler(getOrders); cv.moveCurrentToFirst(); }); function getOrders() { detail = wijmo.Control.getControl("#Orders"); cvDetail = detail.collectionView; cvDetail.refresh(); } function getCustomer(sender, e) { if (e.extraRequestData == null) { e.extraRequestData = {}; } grid = wijmo.Control.getControl("#Customer"); if (grid) { currentItem = grid.collectionView.currentItem; e.extraRequestData["CustomerID"] = currentItem ? currentItem.CustomerID : ""; } } </script> } <h4>@Html.Raw(FlexGridRes.MasterDetail_Text0)</h4> <c1-flex-grid id="Customer" auto-generate-columns="false" is-read-only="true" selection-mode="Row"> <c1-flex-grid-column binding="CustomerID" width="*" /> <c1-flex-grid-column binding="CompanyName" width="2*" /> <c1-flex-grid-column binding="Country" width="2*" /> <c1-flex-grid-column binding="City" width="2*" /> <c1-items-source source-collection="Model" /> </c1-flex-grid> <br/> <h4>@Html.Raw(FlexGridRes.MasterDetail_Text1)</h4> <c1-flex-grid id="Orders" auto-generate-columns="false" is-read-only="true"> <c1-flex-grid-column binding="OrderID" /> <c1-flex-grid-column binding="EmployeeID" /> <c1-flex-grid-column binding="OrderDate" /> <c1-flex-grid-column binding="ShippedDate" /> <c1-flex-grid-column binding="RequiredDate" /> <c1-flex-grid-column binding="Freight" /> <c1-flex-grid-column binding="ShipVia" /> <c1-flex-grid-column binding="ShipName" /> <c1-flex-grid-column binding="ShipCountry" /> <c1-flex-grid-column binding="ShipCity" /> <c1-flex-grid-column binding="ShipAddress" /> <c1-flex-grid-column binding="ShipPostalCode" /> <c1-items-source read-action-url="@Url.Action("DetailData")" query-data="getCustomer" /> </c1-flex-grid> @section Description{ @Html.Raw(FlexGridRes.MasterDetail_Text2) }
マニュアル