Using custom binding to manage large datasets with the Kendo Grid

The KendoUI grid comes with robust client-side functionality, and Ajax-capabilities - sorting, filtering, paging is all just built in. With the Razor wrapper, the .Pageable(), .Sortable(), and .Filterable() extension methods take care of it all. If the data you’re displaying is minimal or even a few thousand rows, this is probably the route to go – just set the grid's dataSource to Ajax, create a read action on your controller, and you’ve got a pretty robust grid.

But once you get into dealing with “large” datasets, you may want to consider implementing custom binding to get data in front of the user without the wait. When I say “large”, I mean data that takes more than a few seconds to display, or data that is likely grow quickly to an unmanageable size. In our scenario the size of the dataset could be up to 25 Mb, but even after compressing it to 800k, it was taking several seconds to send the data from the server to the browser and then display the data in the grid. After the painful initial wait though, paging, sorting, filtering was then instantaneous since the data was all client side. But what to do about the initial wait?

That’s where custom binding can help out. By implementing custom binding, you can combine the best of Ajax and Server binding to quickly deliver large datasets to your users. A small drawback is that all the sorting, filtering, paging has to be handled in the controller method. Fortunately Kendo makes this fairly easy by automatically passing collections of criteria on the request object – here’s a quick overview of server code required to manually implement paging, sorting and filtering when implementing custom binding.

Sorting

The sorts collection on the request object contains the fields and directions of all sorts that are currently applied to the grid. foreach (SortDescriptor sortDescriptor in request.sorts) { if (sortDescriptor.SortDirection == ListSortDirection.Ascending) { switch (sortDescriptor.Member) { case "Name": summaries = summaries.OrderBy(s => s.Name); break; case "Type": summaries = summaries.OrderBy(order => order.Type); break; //Ad Nauseum... } } else { switch (sortDescriptor.Member) { case "Name": summaries = summaries.OrderByDescending(s => s.Name); break; case "Type": summaries = summaries.OrderByDescending(order => order.Type); break; //Ad Nauseum – all sortable columns } } }

Filtering

This is beautiful – I was expecting to have to write code to handle all possible operators and fields, but Kendo’s ExpressionBuilder class will take the filters collection from the request and convert it to a lambda expression to be applied to your dataset! Way easy. var exp = ExpressionBuilder.Expression<CampaignModel>(request.Filters); mappedSummaries = mappedSummaries.AsQueryable().Where(exp);

Paging

Based on the page number and the page size, determine the subset of data to return to the client. if (request.Page > 0) mappedSummaries = mappedSummaries.Skip((request.Page - 1) * request.PageSize); } mappedSummaries = mappedSummaries.Take(request.PageSize); var result = new DataSourceResult() { Data = mappedSummaries, Total = total };

One other thing to remember when implementing custom binding is that Server caching of the dataset is something to keep in mind – especially if the db call takes more than a second or two. With custom binding, we’re calling back to the server on every filter, page, or sort event – so we don’t want to make a db call on top of that every time. This is true even (and especially) if we use Kendo’s Server databinding instead of Ajax databinding. So anyway, if you’re using Kendo’s data grids, the out of the box Ajax binding is a good, easily implementable solution, but if you’re dealing with large amounts of data, you’ll want to look into custom binding.

Full Razor code for grid with custom binding enabled:

@(Html.Kendo().Grid<CampaignAdminListModel>() .Name("Grid") .BindTo(Model) .EnableCustomBinding(true) .DataSource(ds => ds .Ajax() .PageSize(12) .Read(read => read.Action("Index", "CampaignAdmin"))) .Columns(columns => { columns.Bound(p => p.CampaignName); columns.Bound(p => p.LeadSourceType).Width(150); columns.Bound(p => p.LeadSourceTypeName).Width(200); columns.Bound(p => p.Source).Width(200); columns.Bound(p => p.Channel).Width(150); columns.Bound(p => p.SubChannel).Width(150); columns.Bound(p => p.Exclude).Width(70); columns.Bound(p => p.Status).Width(70); columns.Bound(p => p.ProductCategory).Width(150); columns.Bound(p => p.QueryStringParameters).Width(150); columns.Bound(p => p.CampaignId).Width(100); columns.Bound(p => p.LeadSourceId).Width(100); }) .Pageable() .Sortable() .Filterable() .ColumnMenu() .Scrollable(scrolling => scrolling.Height(500)) )

Full controller method for grid Read event:
[HttpPost] //Required by KendoGrid.DataSource.Read event public ActionResult Index([DataSourceRequest] DataSourceRequest request) { var mappedSummaries = GetMappedCampaignAdminList(_userProfile.AccountId); //Apply Sorting mappedSummaries = SortMappedSummaries(mappedSummaries, request.Sorts); //Apply Filters var expression = ExpressionBuilder.Expression<CampaignAdminListModel>(request.Filters); mappedSummaries = mappedSummaries.AsQueryable().Where(expression); var total = mappedSummaries.Count(); //Apply paging if (request.Page > 0) { mappedSummaries = mappedSummaries.Skip((request.Page - 1) * request.PageSize); } mappedSummaries = mappedSummaries.Take(request.PageSize); var result = new DataSourceResult() { Data = mappedSummaries, Total = total }; var jsonResult = Json(result, JsonRequestBehavior.AllowGet); jsonResult.MaxJsonLength = int.MaxValue; return jsonResult; }