Custom Binding

The Telerik UI Grid for ASP.NET Core 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 Ajax-binding.

Setting Custom Ajax Binding

1. 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 the Kendo.UI.DataSourceRequestAttribute. This attribute is responsible for populating the DataSourceRequest object.

   public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
   {
       IQueryable<Order> orders = new NorthwindEntities().Orders;
   }
   

2. 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);
   }
   

3. Create a new instance of DataSourceResult. Set the Data and Total 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.
       };
   }
   

4. 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);
   }
   

5. 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")
           )
       )
   

See Also

• Custom Ajax Binding by the Grid HtmlHelper for ASP.NET Core (Demo)
• Server-Side API