How to: Implement Custom Data Binding with Paging and Sorting

• Aug 01, 2019
• 7 minutes to read

This sample demonstrates how to implement a simple custom binding scenario for the GridView extension by handling only sorting and paging operations in the corresponding Action methods.

To learn more on the GridView’s custom data binding feature, refer to the Custom Data Binding help topic.

Note that this sample provides a universal implementation approach - it can be easily adopted and used for every custom data source object that implements the IQueryable interface.

In short, the logic of this custom binding implementation is as follows:

• In the GridView’s Partial View (Views > Home > GridViewPartial.cshtml), the grid’s GridViewSettings.CustomBindingRouteValuesCollection property is used to define handling actions for sorting and paging operations; the GridSettingsBase.CallbackRouteValues property defines the action to handle all other (standard) grid callbacks.
• In the Controller (Controller > HomeController.cs), the specified Action methods are implemented to update a specific grid view model object (GridViewModel that maintains the grid state) with information on the performed operation (if required). Then, the grid view model’s GridViewModel.ProcessCustomBinding method is called to delegate a binding implementation to specific model-layer methods pointed by the method’s certain parameters.

• At the Model layer (Models > CustomBindingModel.cs), the two specified delegates are implemented to populate the grid view mode with the required data. Generally, in the provided model-level implementation, you just need to modify a single code line to point to your particular model object that implements the IQueryable interface:

  C#

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

• Finally, the resulting grid view model object is passed from the Controller to the grid’s Partial View as a Model. In the Partial View, the grid is bound to the Model via the GridViewExtension.BindToCustomData method.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-implement-a-simple-custom-binding-scenario-for-gridview-e4394

Index.cshtml

@Html.Action("GridViewPartial")

Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
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
    {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
        }

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);

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

CustomBindingModel.cs

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 Converter { get { return new CriteriaToExpressionConverter(); } }

        public static IQueryable Select(this IQueryable query, string fieldName) {
            return query.MakeSelect(Converter, 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(Converter, new ServerModeOrderDescriptor(new OperandProperty(fieldName), order == ColumnSortOrder.Descending));
        }
        public static IQueryable ApplyFilter(this IQueryable query, string filterExpression) {
            return query.AppendWhere(Converter, CriteriaOperator.Parse(filterExpression));
        }
    }
}

GridViewPartial.cshtml

@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()

_Layout.cshtml

<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
        new Script { ExtensionSuite = ExtensionSuite.GridView }, 
        new Script { ExtensionSuite = ExtensionSuite.Editors }
    )
</head>
<body>
    @RenderBody()
</body>
</html>

Northwind.cs

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;
        }
    }
}

HomeController.cs

using System.Web.Mvc;
using DevExpress.Web.Mvc;
using Sample.Models;

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;
        }
    }
}

GridViewPartial.vbhtml

@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()

Index.vbhtml

@Html.Action("GridViewPartial")

Northwind.vb

Imports Microsoft.VisualBasic
Imports System.Linq
Imports System.Web

Namespace Sample.Models
    Public NotInheritable Class NorthwindDataProvider
        Private Const NorthwindDataContextKey As String = "DXNorthwindDataContext"

        Private Sub New()
        End Sub
        Public Shared ReadOnly Property DB() As NorthwindDataContext
            Get
                If HttpContext.Current.Items(NorthwindDataContextKey) Is Nothing Then
                    HttpContext.Current.Items(NorthwindDataContextKey) = New NorthwindDataContext()
                End If
                Return CType(HttpContext.Current.Items(NorthwindDataContextKey), NorthwindDataContext)
            End Get
        End Property

        Public Shared Function GetCustomers() As IQueryable(Of Customer)
            Return DB.Customers
        End Function
    End Class
End Namespace

_Layout.vbhtml

<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
    @Html.DevExpress().GetStyleSheets( 
        New StyleSheet With { .ExtensionSuite = ExtensionSuite.NavigationAndLayout }, _
        New StyleSheet With { .ExtensionSuite = ExtensionSuite.Editors }, _
        New StyleSheet With { .ExtensionSuite = ExtensionSuite.GridView } _
    )
    @Html.DevExpress().GetScripts( 
        New Script With { .ExtensionSuite = ExtensionSuite.NavigationAndLayout }, _ 
        New Script With { .ExtensionSuite = ExtensionSuite.HtmlEditor }, _ 
        New Script With { .ExtensionSuite = ExtensionSuite.GridView } _
    )
</head>
<body>
    @RenderBody()
</body>
</html>

HomeController.vb

Imports Microsoft.VisualBasic
Imports System.Web.Mvc
Imports DevExpress.Web.Mvc
Imports Sample.Models

Namespace Sample.Controllers
    Public Class HomeController
        Inherits Controller
        Public Function Index() As ActionResult
            Return View()
        End Function
        Public Function GridViewPartial() As ActionResult
            Dim viewModel = GridViewExtension.GetViewModel("gridView")
            If viewModel Is Nothing Then
                viewModel = CreateGridViewModel()
            End If
            Return GridCustomActionCore(viewModel)
        End Function

        Public Function GridViewSortingAction(ByVal column As GridViewColumnState, ByVal reset As Boolean) As ActionResult
            Dim viewModel = GridViewExtension.GetViewModel("gridView")
            viewModel.SortBy(column, reset)
            Return GridCustomActionCore(viewModel)
        End Function
        Public Function GridViewPagingAction(ByVal pager As GridViewPagerState) As ActionResult
            Dim viewModel = GridViewExtension.GetViewModel("gridView")
            viewModel.Pager.Assign(pager)
            Return GridCustomActionCore(viewModel)
        End Function

        Public Function GridCustomActionCore(ByVal gridViewModel As GridViewModel) As ActionResult
            gridViewModel.ProcessCustomBinding(AddressOf CustomBindingHandlers.GetDataRowCount, AddressOf CustomBindingHandlers.GetData)
            Return PartialView("GridViewPartial", gridViewModel)
        End Function

        Private Shared Function CreateGridViewModel() As GridViewModel
            Dim 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
        End Function
    End Class
End Namespace

CustomBindingModel.vb

Imports Microsoft.VisualBasic
Imports System.Collections.Generic
Imports System.Linq
Imports DevExpress.Data
Imports DevExpress.Data.Filtering
Imports DevExpress.Data.Linq
Imports DevExpress.Data.Linq.Helpers
Imports DevExpress.Web.Mvc

Namespace Sample.Models
    Public NotInheritable Class CustomBindingHandlers
        Private Sub New()
        End Sub
        Private Shared ReadOnly Property Model() As IQueryable
            Get
                Return NorthwindDataProvider.GetCustomers()
            End Get
        End Property

        Public Shared Sub GetDataRowCount(ByVal e As GridViewCustomBindingGetDataRowCountArgs)
            e.DataRowCount = Model.Count()
        End Sub
        Public Shared Sub GetData(ByVal e As GridViewCustomBindingGetDataArgs)
            e.Data = Model.ApplySorting(e.State.SortedColumns).Skip(e.StartDataRowIndex).Take(e.DataRowCount)
        End Sub
    End Class

    Public Module GridViewCustomOperationDataHelper
        Sub New()
        End Sub
        Private ReadOnly Property Converter() As ICriteriaToExpressionConverter
            Get
                Return New CriteriaToExpressionConverter()
            End Get
        End Property

        <System.Runtime.CompilerServices.Extension()> _
        Public Function [Select](ByVal query As IQueryable, ByVal fieldName As String) As IQueryable
            Return query.MakeSelect(Converter, New OperandProperty(fieldName))
        End Function
        <System.Runtime.CompilerServices.Extension()> _
        Public Function ApplySorting(ByVal query As IQueryable, ByVal sortedColumns As IEnumerable(Of GridViewColumnState)) As IQueryable
            For Each column As GridViewColumnState In sortedColumns
                query = ApplySorting(query, column.FieldName, column.SortOrder)
            Next column
            Return query
        End Function
        <System.Runtime.CompilerServices.Extension()> _
        Public Function ApplySorting(ByVal query As IQueryable, ByVal fieldName As String, ByVal order As ColumnSortOrder) As IQueryable
            Return query.MakeOrderBy(Converter, New ServerModeOrderDescriptor(New OperandProperty(fieldName), order = ColumnSortOrder.Descending))
        End Function
        <System.Runtime.CompilerServices.Extension()> _
        Public Function ApplyFilter(ByVal query As IQueryable, ByVal filterExpression As String) As IQueryable
            Return query.AppendWhere(Converter, CriteriaOperator.Parse(filterExpression))
        End Function
    End Module
End Namespace

C#

 (Index.cshtml)
@Html.Action("GridViewPartial")

VB.NET

 (Index.vbhtml)
@Html.Action("GridViewPartial")