Custom Binding
The Telerik UI Grid for ASP.NET MVC enables you to bypass the built-in data processing and to handle operations such paging, sorting, filtering, and grouping yourself.
The Grid provides options for setting custom server-binding and custom Ajax-binding.
Setting Custom Server Binding
-
Add a new parameter of type
Kendo.UI.DataSourceRequest
to the action method. It will contain the current Grid request information—page, sort, group, and filter. Decorate this parameter with theKendo.UI.DataSourceRequestAttribute
. This attribute is responsible for populating theDataSourceRequest
object.public ActionResult Index([DataSourceRequest(Prefix = "Grid")] DataSourceRequest request) { IQueryable<Order> orders = new NorthwindEntities().Orders; }
-
Assign a default
pageSize
.public ActionResult Index([DataSourceRequest(Prefix = "Grid")] DataSourceRequest request) { if (request.PageSize == 0) { request.PageSize = 10; } IQueryable<Order> orders = new NorthwindEntities().Orders; }
-
Handle the appropriate data operations.
public ActionResult Index([DataSourceRequest(Prefix = "Grid")] DataSourceRequest request) { if (request.PageSize == 0) { request.PageSize = 10; } IQueryable<Order> orders = new NorthwindEntities().Orders; if (request.Sorts.Any()) { foreach (SortDescriptor sortDescriptor in request.Sorts) { if (sortDescriptor.SortDirection == ListSortDirection.Ascending) { switch (sortDescriptor.Member) { case "OrderID": orders= orders.OrderBy(order => order.OrderID); break; case "ShipAddress": orders= orders.OrderBy(order => order.ShipAddress); break; } } else { switch (sortDescriptor.Member) { case "OrderID": orders= orders.OrderByDescending(order => order.OrderID); break; case "ShipAddress": orders= orders.OrderByDescending(order => order.ShipAddress); break; } } } } else { // If cannot page unsorted data. orders = orders.OrderBy(o => o.OrderID); } // Apply paging. if (request.Page > 0) { orders = orders.Skip((request.Page - 1) * request.PageSize); } orders = orders.Take(request.PageSize); }
-
Calculate the total number of records.
public ActionResult Index([DataSourceRequest(Prefix = "Grid")] DataSourceRequest request) { if (request.PageSize == 0) { request.PageSize = 10; } IQueryable<Order> orders = new NorthwindEntities().Orders; // Apply sorting (code omitted). // Calculate the total number of records before paging. var total = orders.Count(); // Apply paging. ViewData["total"] = total; }
-
Pass the processed data to the View.
public ActionResult Index([DataSourceRequest]DataSourceRequest request) { // Get the data (code omitted). // Apply sorting (code omitted). // Calculate the total number of records (code omitted). // Apply paging (code omitted). return View(orders); }
Set
EnableCustomBinding(true)
through the Grid widget declaration.
@model IEnumerable<KendoGridCustomServerBinding.Models.Order>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.EnableCustomBinding(true)
.Columns(columns => {
columns.Bound(o => o.OrderID);
columns.Bound(o => o.ShipAddress);
})
.Pageable()
.Sortable()
.Scrollable()
)
-
If paging is enabled, assign the total number of records through the
DataSource
.@model IEnumerable<KendoGridCustomServerBinding.Models.Order> @(Html.Kendo().Grid(Model) .Name("Grid") .EnableCustomBinding(true) .Columns(columns => { columns.Bound(o => o.OrderID); columns.Bound(o => o.ShipAddress); }) .Pageable() .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Server() .Total((int)ViewData["total"]) // set the total number of records ) )
To download the Visual Studio Project, refer to this GitHub repository.
Setting Custom Ajax Binding
-
Add a new parameter of type
Kendo.UI.DataSourceRequest
to the action method. It will contain the current Grid request information—page, sort, group, and filter. Decorate this parameter with theKendo.UI.DataSourceRequestAttribute
. This attribute is responsible for populating theDataSourceRequest
object.public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request) { IQueryable<Order> orders = new NorthwindEntities().Orders; }
-
Handle the appropriate data operations and calculate the total number of records.
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request) { IQueryable<Order> orders = new NorthwindEntities().Orders; // Apply sorting. if (request.Sorts.Any()) { foreach (SortDescriptor sortDescriptor in request.Sorts) { if (sortDescriptor.SortDirection == ListSortDirection.Ascending) { switch (sortDescriptor.Member) { case "OrderID": orders= orders.OrderBy(order => order.OrderID); break; case "ShipAddress": orders= orders.OrderBy(order => order.ShipAddress); break; } } else { switch (sortDescriptor.Member) { case "OrderID": orders= orders.OrderByDescending(order => order.OrderID); break; case "ShipAddress": orders= orders.OrderByDescending(order => order.ShipAddress); break; } } } } else { // If cannot page unsorted data. orders = orders.OrderBy(o => o.OrderID); } var total = orders.Count(); // Apply paging. if (request.Page > 0) { orders = orders.Skip((request.Page - 1) * request.PageSize); } orders = orders.Take(request.PageSize); }
-
Create a new instance of
DataSourceResult
. Set theData
andTotal
properties to the processed data and to the total number of records.public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request) { // Get the data (code omitted). IQueryable<Order> orders = new NorthwindEntities().Orders; // Apply sorting (code omitted). // Apply paging (code omitted). // Initialize the DataSourceResult. var result = new DataSourceResult() { Data = orders, // Process data (paging and sorting applied). Total = total // The total number of records. }; }
-
Return the
DataSourceResult
as JSON.public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request) { // Get the data (code omitted). IQueryable<Order> orders = new NorthwindEntities().Orders; // Apply sorting (code omitted). // Apply paging (code omitted). // Initialize the DataSourceResult (code omitted). var result = new DataSourceResult() { Data = orders, // Process data (paging and sorting applied) Total = total // Total number of records }; // Return the result as JSON. return Json(result); }
-
Configure the Grid for custom Ajax binding.
@(Html.Kendo().Grid<KendoGridCustomAjaxBinding.Models.Order>() .Name("Grid") .EnableCustomBinding(true) .Columns(columns => { columns.Bound(o => o.OrderID); columns.Bound(o => o.ShipAddress); }) .Pageable() .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Read("Orders_Read", "Home") ) )
To download the Visual Studio Project, refer to this GitHub repository.