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 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)
}
Documentation