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.
C#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.
Razorsettings.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.
Razorsettings.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.
C#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:
C#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
More Examples
Example Code
C#using DevExpress.Web.Mvc;
using Sample.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Sample.Controllers
{
public class HomeController : Controller {
public ActionResult Index() {
return View();
}
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);
}
public ActionResult GridCustomActionCore(GridViewModel gridViewModel) {
gridViewModel.ProcessCustomBinding(
CustomBindingHandlers.GetDataRowCount,
CustomBindingHandlers.GetData
);
return PartialView("GridViewPartial", gridViewModel);
}
static GridViewModel CreateGridViewModel() {
var viewModel = new GridViewModel();
viewModel.KeyFieldName = "CustomerID";
viewModel.Columns.Add("ContactName");
viewModel.Columns.Add("CompanyName");
viewModel.Columns.Add("ContactTitle");
viewModel.Columns.Add("City");
viewModel.Columns.Add("Phone");
viewModel.Pager.PageSize = 20;
return viewModel;
}
}
}
C#using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
namespace Sample {
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit http://go.microsoft.com/?LinkId=9394801
public class MvcApplication : System.Web.HttpApplication {
protected void Application_Start() {
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();
DevExpress.Web.ASPxWebControl.CallbackError += Application_Error;
}
protected void Application_Error(object sender, EventArgs e) {
Exception exception = System.Web.HttpContext.Current.Server.GetLastError();
//TODO: Handle Exception
}
}
}
C#using System;
using System.Collections.Generic;
using System.Linq;
using DevExpress.Data;
using DevExpress.Data.Filtering;
using DevExpress.Data.Linq;
using DevExpress.Data.Linq.Helpers;
using DevExpress.Web.Mvc;
namespace Sample.Models {
public static class CustomBindingHandlers {
static IQueryable Model { get { return NorthwindDataProvider.GetCustomers(); } }
public static void GetDataRowCount(GridViewCustomBindingGetDataRowCountArgs e) {
e.DataRowCount = Model.Count();
}
public static void GetData(GridViewCustomBindingGetDataArgs e) {
e.Data = Model
.ApplySorting(e.State.SortedColumns)
.Skip(e.StartDataRowIndex)
.Take(e.DataRowCount);
}
}
public static class GridViewCustomOperationDataHelper {
static ICriteriaToExpressionConverter CreateConverter(Type queryType) {
return new CriteriaToEFExpressionConverter(queryType);
}
public static IQueryable Select(this IQueryable query, string fieldName) {
return query.MakeSelect(CreateConverter(query.Provider.GetType()), new OperandProperty(fieldName));
}
public static IQueryable ApplySorting(this IQueryable query, IEnumerable<GridViewColumnState> sortedColumns) {
foreach(GridViewColumnState column in sortedColumns)
query = ApplySorting(query, column.FieldName, column.SortOrder);
return query;
}
public static IQueryable ApplySorting(this IQueryable query, string fieldName, ColumnSortOrder order) {
return query.MakeOrderBy(CreateConverter(query.Provider.GetType()), new ServerModeOrderDescriptor(new OperandProperty(fieldName), order == ColumnSortOrder.Descending));
}
public static IQueryable ApplyFilter(this IQueryable query, string filterExpression) {
return query.AppendWhere(CreateConverter(query.Provider.GetType()), CriteriaOperator.Parse(filterExpression));
}
}
}
C#using System.Linq;
using System.Web;
namespace Sample.Models {
public static class NorthwindDataProvider {
const string NorthwindDataContextKey = "DXNorthwindDataContext";
public static NorthwindDataContext DB {
get {
if(HttpContext.Current.Items[NorthwindDataContextKey] == null)
HttpContext.Current.Items[NorthwindDataContextKey] = new NorthwindDataContext();
return (NorthwindDataContext)HttpContext.Current.Items[NorthwindDataContextKey];
}
}
public static IQueryable<Customer> GetCustomers() {
return DB.Customers;
}
}
}
Razor@Html.DevExpress().GridView(
settings => {
settings.Name = "GridView";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.KeyFieldName = "CustomerID";
settings.Columns.Add("ContactName");
settings.Columns.Add("CompanyName");
settings.Columns.Add("ContactTitle");
settings.Columns.Add("City");
settings.Columns.Add("Phone");
settings.CustomBindingRouteValuesCollection.Add(
GridViewOperationType.Sorting,
new { Controller = "Home", Action = "GridViewSortingAction" }
);
settings.CustomBindingRouteValuesCollection.Add(
GridViewOperationType.Paging,
new { Controller = "Home", Action = "GridViewPagingAction" }
);
}).BindToCustomData(Model).GetHtml()
Code@Html.DevExpress().GridView(Sub(settings)
settings.Name = "GridView"
settings.CallbackRouteValues = New With { .Controller = "Home", .Action = "GridViewPartial" }
settings.Width = Unit.Percentage(100)
settings.KeyFieldName = "CustomerID"
settings.Columns.Add("ContactName")
settings.Columns.Add("CompanyName")
settings.Columns.Add("ContactTitle")
settings.Columns.Add("City")
settings.Columns.Add("Phone")
settings.CustomBindingRouteValuesCollection.Add(
GridViewOperationType.Sorting,
New With { .Controller = "Home", .Action = "GridViewSortingAction" }
)
settings.CustomBindingRouteValuesCollection.Add(
GridViewOperationType.Paging,
New With { .Controller = "Home", .Action = "GridViewPagingAction" }
)
End Sub).BindToCustomData(Model).GetHtml()
Razor@Html.Action("GridViewPartial")
Code@Html.Action("GridViewPartial")