Kendo UI

KendoUI: Understanding ToDataSourceResult

doylestowncoder3 Comments

Using server filtering is rather easy with Kendo UI MVC, unless your new to it.  Then that first couple hours is pretty frustrating untill you find the right article, information and samples.  I have very few gripes with Telerik and Kendo UI but they do have a problem with the Kendo UI Demos.  They do not include enough sample code from controllers and web services.  So hopefully this will help out those newbies to KendoUI.

When would I use this?

Server-side Filtering, Paging, and Sorting with the Grid or ListView.

How to use it?

When would I use this?  Server-side Filtering with the Grid or ListView.

First thing you want to do is add the following the following using statement to you Controller or API Controller:

using Kendo.Mvc.Extensions;

Now, you can easily take advantage of ToDataSourceResult extension method to convert any IQueryable or IEnumerable to a DataSourceResult object.  It will help you page, filter, sort or group your data using the information provided by the DataSourceRequestObject.

Your AJAX action will take one parameter:  DataSourceRequest.

public ActionResult GetAllOrders([DataSourceRequest] DataSourceRequest request)

Now in the method, you just call ToDataSourceResult on your IQueryable or IEnumerator.  Pretty simple, although you have to be careful when dealing with large volumes of data o make sure your implementation does not return all the data before applying filter, sorting, and paging.

How is ToDataSourceResult being implemented under the hood by Telerik?  C# Extension Methods.  If you need a refresher, check it out here:

If you want to see the implementation, then use JustDecompile and run it against Kendo.MVC.dll.

Which Kendo UI Widgets

This is meant to be used with the following controls:

  • Grid
  • ListView

Other controls like ComboBox and AutoComplete expect just a simple array and will not work with DataSourceResult.

Does this only work with a ORM?

No, it does not.  Note:  Any IQueryable or IEnumerable so LINQ, List, Dictionary, etc…

Let’s dive into a simple example

In my sample, I have a Domain POCO Class called Order.

public class Order
{
 public int Id { get; set; }
 public string LastName { get; set; }

 public decimal TotalAmount { get; set; }

 public decimal TotalAmountUsd { get; set; }

 public string OrderCurrencyCode { get; set; }

 public string OrderCurrencyCultureCode { get; set; }

 public DateTime OrderDate { get; set; }
}

Then I have a Domain Class that contains a list of Orders.  This has data stubbed out for now.

public class Orders
{
   private readonly List orders = new List();
   private int nextId = -1;

   public Orders()
   {
     Add(new Order() { LastName = "Federer", TotalAmount = 1023.23m, TotalAmountUsd = 400.23m, OrderCurrencyCode = "SEK", OrderCurrencyCultureCode = "sv-SE", OrderDate = DateTime.UtcNow.AddDays(-1) });
     // Add lots of data here........
     Add(new Order() { LastName = "Aikemo", TotalAmount = 1023.23m, TotalAmountUsd = 400.23m, OrderCurrencyCode = "JPY", OrderCurrencyCultureCode = "ja-JP", OrderDate = DateTime.UtcNow.AddDays(-8) });
 }

 public Order Add(Order item)
 {
   if (item == null)
   {
     throw new ArgumentNullException("item");
   }
   item.Id = nextId++;
   orders.Add(item);
   return item;
 }

 public List GetAll()
 {
  return orders;
 }
}

Then, I have a ViewModel which looks just like my Order class.

public class OrderViewModel
{
 public int Id { get; set; }
 public string LastName { get; set; }

 public decimal TotalAmount { get; set; }

 public decimal TotalAmountUsd { get; set; }

 public string OrderCurrencyCode { get; set; }

 public string OrderCurrencyCultureCode { get; set; }

 public DateTime OrderDate { get; set; }
}

In the controller, I have the following Action (Note:  My controller is importing  Kendo.Mvc.Extensions):

[HttpPost]
public ActionResult GetAllOrders([DataSourceRequest] DataSourceRequest request)
 {
   Orders orders = new Orders();
   List orderList = orders.GetAll();
   DataSourceResult result = orderList.ToDataSourceResult(request, 
     order => new OrderViewModel 
     { 
       Id = order.Id, LastName = order.LastName,
       OrderCurrencyCode = order.OrderCurrencyCode, OrderCurrencyCultureCode = order.OrderCurrencyCultureCode,
       TotalAmount = order.TotalAmount, TotalAmountUsd = order.TotalAmountUsd,
       OrderDate = order.OrderDate
     }
   );

   return Json(result);
 }

The call to ToDataSourceResult is taking the request information and using that to filter, sort, etc the results and transform them into the ViewModel.  Pretty simple and straightforward.

Finally, in your Razor view you can call your AJAX method which will easily page, filter, sort, etc…

@(Html.Kendo().Grid()
 .Name("grid")
 .HtmlAttributes(new { style = "width:700px" })
 .Columns(columns =>
 {
 columns.Bound(p => p.Id).Title("Order Id");
 columns.Bound(p => p.LastName).Title("Customer");
 columns.Bound(p => p.TotalAmount).Title("Total Amount");
 columns.Bound(p => p.TotalAmountUsd).Title("Total Amount (USD)");
 columns.Bound(p => p.OrderDate).Title("Ordered On");
 })
 .Pageable()
 .Sortable()
 .Scrollable()
 .Filterable()
 .DataSource(dataSource => dataSource
 .Ajax()
 .PageSize(5)
 .Read(read => read.Action("GetAllOrders", "Orders"))
 )
)

Now the user can sort, page, filter, …

Grid Filtering
Grid Filtering

KendoUI Resources

Here are a couple helpful resources from Telerik:

 

Conclusion

This is pretty simple once you get the basics down so good luck coding up your solutions with it.