Telerik Extensions for ASP.NET MVC

This help topic discusses how to implement custom binding with Telerik Grid for ASP.NET MVC

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Telerik Grid for ASP.NET MVC is using its built-in Linq-based expression engine to perform the grid operations - paging, sorting and filtering. However in some cases the developer may want to bypass the expression engine and page, sort or filter the grid data by himself. This is called "Custom binding".

Custom Server Binding

You can implement both server and ajax custom binding. Now we will cover the custom server binding scenario.
  • The action method needs to be decorated with the GridActionAttribute
  • The action method should have a parameter of type GridCommand which will contain info about the grid data operations - current page, sorted columns, filters etc. You can use that object to perform paging, sorting and filtering.
  • If you need paging you need to set the total number of records so the pager is properly configured. This is done via the Total(Int32) method.
  • The EnableCustomBinding(Boolean) should be set to true.
Here is a sample code snippet:
CopyController
[GridAction]
public ActionResult Index(GridCommand command)
{
    IEnumerable<Order> data = GetData(command);
    var dataContext = new NorthwindDataContext();

    //Required for pager configuration
    ViewData["total"] = dataContext.Orders.Count();

    return View(data);
}

//Utility method which does custom paging and sorting using Linq
private static IEnumerable<Order> GetData(GridCommand command)
{
    var dataContext = new NorthwindDataContext();
    IQueryable<Order> data = dataContext.Orders;

    //Apply sorting
    foreach (SortDescriptor sortDescriptor in command.SortDescriptors)
    {
        if (sortDescriptor.SortDirection == ListSortDirection.Ascending)
        {
            switch (sortDescriptor.Member)
            {
                case "OrderID":
                    data = data.OrderBy(order => order.OrderID);
                    break;
                case "ShipAddress":
                    data = data.OrderBy(order => order.ShipAddress);
                    break;
            }
        }
        else
        {
            switch (sortDescriptor.Member)
            {
                case "OrderID":
                    data = data.OrderByDescending(order => order.OrderID);
                    break;
                case "ShipAddress":
                    data = data.OrderByDescending(order => order.ShipAddress);
                    break;
            }
        }
    }

    //Then paging
    if (command.PageSize > 0)
    {
        data = data.Skip((command.Page - 1) * command.PageSize);
    }

    data = data.Take(pageSize);
    return data;
}
CopyView
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Pageable(settings => settings.Total((int)ViewData["total"]))
        .EnableCustomBinding(true)
        .Sortable()
%>
The interesting part is the GetData method which does the custom paging and sorting. You can replace it with your implementation of choice.

Custom Ajax Binding

Using Ajax custom binding is pretty much the same. Again you need the GridActionAttribute, a GridCommand parameter, a method to perform the actual custom binding. The only difference is that you need to set the EnableCustomBinding property of the GridActionAttribute to true:
CopyController
[GridAction(EnableCustomBinding = true)]
public ActionResult _CustomBinding(GridCommand command)
{
    IEnumerable<Order> data = GetData(command);

    var dataContext = new NorthwindDataContext();
    return View(new GridModel 
    { 
        Data = data, 
        Total = dataContext.Orders.Count() 
    });
}
CopyView
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Pageable(settings => settings.Total((int)ViewData["total"]))
        .DataBinding(dataBinding => dataBinding
             .Ajax()
                 .Select("_CustomBinding", "Home")
        )
        .EnableCustomBinding(true)
        .Sortable()
%>

See Also