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