ASP.NET MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Data Binding / Master Detail in FlexGrid
In This Topic
    Master Detail in FlexGrid
    In This Topic

    The FlexGrid can be customized to display Master-Detail data. This interface shows data in two grids. The grid with master data shows a collection of objects, while detail grid displays details specific to the object selected by the user in master grid. Changing the selection in master grid will update the detail grid accordingly.

    This topic demonstrates how to display master detail data using two related data tables. The following example uses Entity Framework model to bind FlexGrid with Customers and Orders data from local NorthWind database file C1NWind.mdf.

    The following image shows a FlexGrid control displaying data in Master-Detail relationship. The master grid displays summarized Customers data in four columns. However, the detail grid details the information of orders placed by a particular customer selected in the master grid. The two tables are related through CustomerID column.

    The following code examples demonstrate how to display Master-Detail data in a FlexGrid control.


    Copy Code
    public class MasterDetailController : Controller
        private C1NWindEntities db = new C1NWindEntities();
        public ActionResult MasterDet()
            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()));


    Initialize the FlexGrid to display Customer data for master interface.

    Copy Code
    @using C1.Web.Mvc.Grid
    @using MVCFlexGrid.Models
    @model IEnumerable<Customer>
    .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*"))

    Initialize the FlexGrid to display Order data for detail interface.

    Copy Code
    .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"))    

    Javascript to display order data corresponding to the selected CustomerID in the master FlexGrid.

    Copy Code
    <script type="text/javascript">
        var grid, cv, detail, cvDetail, currentItem;
        c1.mvc.Utils.documentReady(function () {
            grid = wijmo.Control.getControl("#Customer");
            cv = grid.collectionView;
        function getOrders() {
            detail = wijmo.Control.getControl("#Orders");
            cvDetail = detail.collectionView;
        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 : "";

    See Also