FlexGrid
Master-Detail
Features
Sample
Customers:
All orders of the selected Customer:
Description
The client side CollectionView has built-in support for currency, which enables you to implement master-detail scenarios with FlexGrid. You can refer to the currentItem and use it as a binding source for any elements on the page.
Note that you have to update the details view when the current item changes. To do that, attach a handler to the currentChanged event and update the details view as needed.
Note that you have to update the details view when the current item changes. To do that, attach a handler to the currentChanged event and update the details view as needed.
Source
MasterDetailController.cs
using System.Linq; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using MvcExplorer.Models; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class FlexGridController : 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
@using C1.Web.Mvc.Grid @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(Resources.FlexGrid.MasterDetail_Text1)</h4> @(Html.C1().FlexGrid().Id("Customer").AutoGenerateColumns(false).IsReadOnly(true).SelectionMode(SelectionMode.Row) .Bind(Model) .Columns(cs => cs.Add(c => c.Binding("CustomerID").Width("*")) .Add(c => c.Binding("CompanyName").Width("2*")) .Add(c => c.Binding("Country").Width("2*")) .Add(c => c.Binding("City").Width("2*")) )) <br/> <h4>@Html.Raw(Resources.FlexGrid.MasterDetail_Text2)</h4> @(Html.C1().FlexGrid().Id("Orders").AutoGenerateColumns(false).IsReadOnly(true) .Bind(i => i.Bind(Url.Action("DetailData")).OnClientQueryData("getCustomer")) .Columns(cs => cs.Add(c => c.Binding("OrderID")) .Add(c => c.Binding("EmployeeID")) .Add(c => c.Binding("OrderDate")) .Add(c => c.Binding("ShippedDate")) .Add(c => c.Binding("RequiredDate")) .Add(c => c.Binding("Freight")) .Add(c => c.Binding("ShipVia")) .Add(c => c.Binding("ShipName")) .Add(c => c.Binding("ShipCountry")) .Add(c => c.Binding("ShipCity")) .Add(c => c.Binding("ShipAddress")) .Add(c => c.Binding("ShipPostalCode")) )) @section Description{ @Html.Raw(Resources.FlexGrid.MasterDetail_Text0) }
Documentation