Grid View for ASP.NET MVC - How to implement a master-detail grid with a simple custom binding scenario

This example demonstrates how to implement a simple custom binding scenario for two GridView extensions that are used in a master-detail relationship, and handle sorting and paging operations in the corresponding Action methods.

You can modify this approach to use it with any data source object that implements the IQueryable interface.

Implementation details

Custom data binding requires that the DevExpressEditorsBinder is used instead of the default model binder to correctly transfer values from DevExpress editors back to the corresponding data model fields. Assign DevExpressEditorsBinder to the ModelBinders.Binders.DefaultBinder property in the Global.asax file to override the default model binder.

ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();

Grid partial view

Call the master grid's SetDetailRowTemplateContent method to define detail row content and provide it with the master row's key field value (the value of the "CustomerID" column).

The CustomBindingRouteValuesCollection property allows you to assign particular handling Actions for four data operations - paging, sorting, grouping, and filtering. In this example, the property specifies custom routing for sorting and paging operations.

The CallbackRouteValues property specifies the action that handles all other (standard) grid callbacks.

Master grid:

@Html.DevExpress().GridView(
    settings => {
        settings.Name = "masterGrid";
        settings.KeyFieldName = "CustomerID";
        settings.SettingsDetail.ShowDetailRow = true;
        settings.SetDetailRowTemplateContent(c => {
            Html.RenderAction("DetailGridViewPartial", new { CustomerID = DataBinder.Eval(c.DataItem, "CustomerID") });
        });

        settings.CallbackRouteValues = new { Controller = "Home", Action = "MasterGridViewPartial" };
        settings.CustomBindingRouteValuesCollection.Add(
            GridViewOperationType.Sorting,
            new { Controller = "Home", Action = "MasterGridViewSortingAction" }
        );
        settings.CustomBindingRouteValuesCollection.Add(
            GridViewOperationType.Paging,
            new { Controller = "Home", Action = "MasterGridViewPagingAction" }
        );
        // ...

Detail grid:

@Html.DevExpress().GridView(
    settings => {
        settings.Name = "detailGrid" + ViewData["CustomerID"];
        settings.SettingsDetail.MasterGridName = "masterGrid";
        settings.KeyFieldName = "OrderID";

        settings.CallbackRouteValues = new { Controller = "Home", Action = "DetailGridViewPartial", CustomerID = ViewData["CustomerID"] };
        settings.CustomBindingRouteValuesCollection.Add(
            GridViewOperationType.Sorting,
            new { Controller = "Home", Action = "DetailGridViewSortingAction", CustomerID = ViewData["CustomerID"] }
        );
        settings.CustomBindingRouteValuesCollection.Add(
            GridViewOperationType.Paging,
            new { Controller = "Home", Action = "DetailGridViewPagingAction", CustomerID = ViewData["CustomerID"] }
        );
        // ...

Controller

Action methods update the GridViewModel object with the information from the performed operation. The ProcessCustomBinding method delegates the binding implementation to specific model-layer methods specified by the Action method's parameters.

Master grid:

        public ActionResult MasterGridViewPartial() {
            var viewModel = GridViewExtension.GetViewModel("masterGrid");
            if (viewModel == null)
                viewModel = CreateMasterGridViewModel();
            return MasterGridActionCore(viewModel);
        }
        public ActionResult MasterGridViewSortingAction(GridViewColumnState column, bool reset) {
            var viewModel = GridViewExtension.GetViewModel("masterGrid");
            viewModel.SortBy(column, reset);
            return MasterGridActionCore(viewModel);
        }
        public ActionResult MasterGridViewPagingAction(GridViewPagerState pager) {
            var viewModel = GridViewExtension.GetViewModel("masterGrid");
            viewModel.Pager.Assign(pager);
            return MasterGridActionCore(viewModel);
        }

Detail grid:

        public ActionResult DetailGridViewPartial(string customerID) {
            var viewModel = GridViewExtension.GetViewModel("detailGrid" + customerID);
            if (viewModel == null)
                viewModel = CreateDetailGridViewModel(customerID);
            return DetailGridActionCore(viewModel, customerID);
        }
        public ActionResult DetailGridViewPagingAction(GridViewPagerState pager, string customerID) {
            var viewModel = GridViewExtension.GetViewModel("detailGrid" + customerID);
            viewModel.Pager.Assign(pager);
            return DetailGridActionCore(viewModel, customerID);
        }
        public ActionResult DetailGridViewSortingAction(GridViewColumnState column, bool reset, string customerID) {
            var viewModel = GridViewExtension.GetViewModel("detailGrid" + customerID);
            viewModel.SortBy(column, reset);
            return DetailGridActionCore(viewModel, customerID);
        }

Model

The specified delegates populate the Grid View model with data. To bind the Grid to your particular model object, modify the following code line:

static IQueryable Model { get { return NorthwindDataProvider.GetCustomers(); } }

The Grid View model object is passed from the Controller to the grid's Partial View as a Model. In the Partial View, the BindToCustomData method binds the grid to the Model.

Files to Review todo

• MasterGridViewPartial.cshtml (VB: MasterGridViewPartial.vbhtml)
• DetailGridViewPartial.cshtml (VB: DetailGridViewPartial.vbhtml)
• HomeController.cs (VB: HomeController.vb)
• DetailCustomBindingModel.cs (VB: DetailCustomBindingModel.vb)
• MasterCustomBindingModel.cs (VB: MasterCustomBindingModel.vb)
• Northwind.cs (VB: Northwind.vb)

Documentation

• Custom Data Binding

More Examples

• Grid View for ASP.NET MVC - How to implement a simple custom binding scenario

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)