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

This example demonstrates how to implement a simple custom binding scenario for the GridView extension 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

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.

settings.CustomBindingRouteValuesCollection.Add(
    GridViewOperationType.Sorting,
    new { Controller = "Home", Action = "GridViewSortingAction" }
);
settings.CustomBindingRouteValuesCollection.Add(
    GridViewOperationType.Paging,
    new { Controller = "Home", Action = "GridViewPagingAction" }
);

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

settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };

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 pointed by the method's parameters.

public ActionResult GridViewPartial() {
    var viewModel = GridViewExtension.GetViewModel("GridView");
    if (viewModel == null)
        viewModel = CreateGridViewModel();
        return GridCustomActionCore(viewModel);
}
public ActionResult GridViewSortingAction(GridViewColumnState column, bool reset) {
    var viewModel = GridViewExtension.GetViewModel("GridView");
    viewModel.SortBy(column, reset);
    return GridCustomActionCore(viewModel);
}
public ActionResult GridViewPagingAction(GridViewPagerState pager) {
    var viewModel = GridViewExtension.GetViewModel("GridView");
    viewModel.Pager.Assign(pager);
    return GridCustomActionCore(viewModel);
}

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

• HomeController.cs (VB: HomeController.vb)
• Global.asax.cs (VB: Global.asax.vb)
• CustomBindingModel.cs (VB: CustomBindingModel.vb)
• Northwind.cs (VB: Northwind.vb)
• GridViewPartial.cshtml (VB: GridViewPartial.vbhtml)
• Index.cshtml (VB: Index.vbhtml)
• _Layout.cshtml (VB: _Layout.vbhtml)

Documentation

• Custom Data Binding

More Examples

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

Does this example address your development requirements/objectives?

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