GridView for MVC - How to implement the master-detail GridView with editing capabilities

This example illustrates how to implement the master-detail GridView with editing capabilities.

Follow the steps below to define the master-detail layout:

1. Define master and detail GridView settings in separate PartialView files.

   GridViewMasterPartial.cshtml

   @Html.DevExpress().GridView(
       settings => {
           settings.Name = "masterGrid";
           // ...
       }).Bind(Model).GetHtml()

   GridViewDetailPartial.cshtml

   @Html.DevExpress().GridView(
       settings => {
           settings.Name = "detailGridView_" + ViewData["RoomID"];
           // ...
   }).Bind(Model).GetHtml()

2. Set the master grid's SettingsDetail.ShowDetailRow property to true.

   settings.SettingsDetail.ShowDetailRow = true;

3. Call the master grid's SetDetailRowTemplateContent method to render the detail grid's PartialView in the Detail Row.

   settings.SetDetailRowTemplateContent(c => {
       Html.RenderAction("GridViewDetailPartial", new { RoomID = DataBinder.Eval(c.DataItem, "ID") });
   });

Note that route values passed in a detail grid's callback must have a unique name and must not replicate any other names on a page.

Files to Look At

• Index.cshtml
• GridViewMasterPartial.cshtml
• GridViewDetailPartial.cshtml

Documentation

• Callback-Based Functionality

More Examples

• GridView - Advanced Master-Detail View
• A simple example of master-detail grids with editing capabilities