Data Grid - Advanced Master-Detail View

This demo illustrates an advanced master-detail view in the DataGrid component. Master rows represent suppliers. Detail sections contain TabPanel components with two tabs: Orders and Address. In the Orders tab, you can choose a supplier's product from the SelectBox, and the DataGrid under it will show orders placed on this product. The Address tab displays the supplier's address.

Backend API

​x
 
@(Html.DevExtreme().DataGrid<DevExtreme.NETCore.Demos.Models.Northwind.Supplier>()    .ID("gridContainer")    .ShowBorders(true)    .DataSource(d => d.Mvc().Controller("DataGridAdvancedMasterDetailView").LoadAction("GetSuppliers").Key("SupplierID"))    .Paging(p => p.PageSize(15))    .Pager(p => p.Visible(true))    .Columns(columns => {        columns.AddFor(m => m.ContactName);​        columns.AddFor(m => m.ContactTitle);​        columns.AddFor(m => m.CompanyName);​        columns.AddFor(m => m.City);​        columns.AddFor(m => m.Country);    })    .MasterDetail(m => m        .Enabled(true)        .Template(new TemplateName("gridContainer-details"))    ))​@using(Html.DevExtreme().NamedTemplate("gridContainer-details")) {    @(Html.DevExtreme().TabPanel()        .Items(items => {            items.Add()                .Title("Orders")                .Template(new TemplateName("gridContainer-details-tab1Template"))                .Option("tabExtras", new { supplierID = new JS("data.SupplierID") });​            items.Add()                .Title("Address")                .Template(new TemplateName("gridContainer-details-tab2Template"))                .Option("tabExtras", new JS("data"));        })    )}​@using(Html.DevExtreme().NamedTemplate("gridContainer-details-tab1Template")) {    @(Html.DevExtreme().Form()        .ElementAttr("class", "form-container")        .FormData(new JS("tabExtras"))        .LabelLocation(FormLabelLocation.Top)        .Items(items => {            items.AddSimple()                .Label(l => l.Text("Product"))                .Editor(e => e.SelectBox()                    .DataSource(d => d.Mvc()                        .Controller("DataGridAdvancedMasterDetailView")                        .LoadAction("GetProductsBySupplier")                        .LoadParams(new { supplierID = new JS("tabExtras.supplierID") })                        .Key("ProductID")                    )                    .InputAttr("aria-label", "Product")                    .ValueExpr("ProductID")                    .DisplayExpr("ProductName")                    .DeferRendering(false)                    .OnContentReady(@<text>                    function(e) {                        var firstItem = e.component.option("items[0]");                        if(firstItem) {                            e.component.option("value", firstItem.ProductID);                        }                    }                    </text>)                    .OnSelectionChanged(@<text>                    function(e) {                        tabExtras.productID = e.selectedItem.ProductID;                        $("#gridContainer-orderHistoryGrid-" + tabExtras.supplierID).dxDataGrid("instance").refresh();                    }                    </text>)                );​            items.AddSimple()                .Label(l => l.Text("Order History"))                .Template(new TemplateName("gridContainer-details-tab1-gridTemplate"));        })    )}​@using(Html.DevExtreme().NamedTemplate("gridContainer-details-tab1-gridTemplate")) {    @(Html.DevExtreme().DataGrid()        .ID(new JS("'gridContainer-orderHistoryGrid-' + component.option('formData').supplierID"))        .ShowBorders(true)        .DataSource(d => d.Mvc()            .Controller("DataGridAdvancedMasterDetailView")            .LoadAction("GetOrdersByProduct")            .LoadParams(new {                productID = new JS("function() { return component.option('formData').productID }")            })        )        .Paging(p => p.PageSize(5))        .Columns(columns => {            columns.Add().DataField("OrderID");            columns.Add().DataField("OrderDate").DataType(GridColumnDataType.Date);            columns.Add().DataField("ShipCountry");            columns.Add().DataField("ShipCity");            columns.Add().DataField("UnitPrice").Format(Format.Currency);            columns.Add().DataField("Quantity");            columns.Add().DataField("Discount").Format(Format.Percent);        })        .Summary(s => s            .TotalItems(totalItems => {                totalItems.Add()                    .Column("UnitPrice")                    .SummaryType(SummaryType.Sum)                    .ValueFormat(f => f                        .Currency("USD")                        .Precision(2)                    );​                totalItems.Add()                    .Column("Quantity")                    .SummaryType(SummaryType.Count);            })        )    )}​@using(Html.DevExtreme().NamedTemplate("gridContainer-details-tab2Template")) {    var formItemTemplate = "<%- editorOptions.value %>";​    @(Html.DevExtreme().Form()        .ElementAttr("class", "address-form form-container")        .FormData(new JS("tabExtras"))        .ColCount(2)        .Items(items => {            items.AddSimple().DataField("Address").Template(formItemTemplate);            items.AddSimple().DataField("City").Template(formItemTemplate);            items.AddSimple().DataField("Region").Template(formItemTemplate);            items.AddSimple().DataField("PostalCode").Template(formItemTemplate);            items.AddSimple().DataField("Country").Template(formItemTemplate);            items.AddSimple().DataField("Phone").Template(formItemTemplate);        })    )}​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models;using DevExtreme.NETCore.Demos.Models.DataGrid;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class DataGridController : Controller {        public ActionResult AdvancedMasterDetailView() {            return View();        }    }}

xxxxxxxxxx
 
using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.Northwind;using Microsoft.AspNetCore.Mvc;using System;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers {​    [Route("api/[controller]/[action]")]    public class DataGridAdvancedMasterDetailViewController : Controller {        NorthwindContext _nwinds;​        public DataGridAdvancedMasterDetailViewController(NorthwindContext nwinds) {            _nwinds = nwinds;        }​        [HttpGet]        public object GetSuppliers(DataSourceLoadOptions options) {            return DataSourceLoader.Load(_nwinds.Suppliers, options);        }​        [HttpGet]        public object GetProductsBySupplier(int supplierID, DataSourceLoadOptions options) {            return DataSourceLoader.Load(_nwinds.Products.Where(p => p.SupplierID == supplierID), options);        }​        [HttpGet]        public object GetOrdersByProduct(int productID, DataSourceLoadOptions options) {            var query = from i in _nwinds.Order_Details                        where i.ProductID == productID                        join j in _nwinds.Orders on i.OrderID equals j.OrderID                        select new {                            i.OrderID,                            j.OrderDate,                            j.ShipCountry,                            j.ShipCity,                            i.UnitPrice,                            i.Quantity,                            i.Discount                        };​            return DataSourceLoader.Load(query, options);        }    }}​

xxxxxxxxxx
 
#gridContainer {    height: 620px;}​.dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) > .dx-datagrid-group-space,.dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) .dx-master-detail-cell {    background-color: transparent;}​.form-container {    padding: 20px;}​.address-form label {    font-weight: bold;}