Telerik Extensions for ASP.NET MVC

This help topic explains how to configure Telerik Grid for ASP.NET MVC to use Ajax when performing data operations - paging, sorting and filtering.

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)

Ajax Binding

By default Telerik Grid for ASP.NET MVC is configured to use Server Binding. While server binding has its merits (SEO for example) smoother user experience can be provided by using Ajax requests when doing paging, sorting or filtering. This grid operation mode is called "Ajax binding".

To configure the grid to use Ajax binding you need to perform the following steps:

  1. Add a new action method which is decorated with the GridActionAttribute and returns result of type IGridModel. Both the attribute and the result type are mandatory.
    CopyController
    public class HomeController : Controller
    {
        //Used for the Ajax binding
        [GridAction]
        public ActionResult _AjaxBinding()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
    
            return View(new GridModel(northwind.Orders));
        }
    
        // Renders the view initially. The grid is bound server-side for the first request
        public ActionResult Index()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return View(northwind.Orders)
        }
    }
    Important
    Behind the scenes the GridActionAttribute uses the IGridModel and the Linq expression engine to apply paging, sorting and filtering. Then the ViewResult is replaced with JsonResult. On the client-side the grid is bound to the JSON returned by the action method. It is very important to note that the actual view (ASPX or ASCX) where the grid is defined is neither processed nor rendered during Ajax binding. For this to happen the action method must be decorated with the GridActionAttribute.
  2. Configure the grid to use the action method created at the previous step:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Orders")
            .DataBinding(dataBinding => dataBinding
                  //Ajax binding
                  .Ajax()
                       //The action method which will return JSON
                       .Select("_AjaxBinding", "Home")
            )
            .Pageable()
            .Sortable()
    %>
    Note
    This example is using also Server binding to bind the grid initially. This is entirely optional. If the grid is configured to use Ajax binding and is not inititially bound (using server binding) it will request the action method and databound itself as soon as the page is loaded.

Configuring the Ajax binding

Sometimes the action method which provides the JSON for the grid may need additional arguments. Here is how to pass them to your action:

CopyView
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .DataBinding(dataBinding => dataBinding
             //Ajax binding
             .Ajax()
                   //The action method which will return JSON and its arguments
                   .Select("_AjaxBinding", "Home", new {id = (string)ViewData["id"]})
        )
        .Pageable()
        .Sortable()
CopyController
public class HomeController : Controller
{
    [GridAction]
    public ActionResult _AjaxBinding(string id)
    {
       NorthwindDataContext northwind = new NorthwindDataContext();
       IQueryable<Order> orders = northwind.Orders;

       if (!string.IsNullOrEmpty(id))
       {
           //Select the orders for the specified CustomerID
           orders = from o in orders
                    where o.CustomerID == id
                    select o;
       }
       return View(new GridModel(orders));
   }
}

Client Operation Mode

By default Telerik Grid for ASP.NET MVC will request data from the server every time the user changes the page, filters the grid, sorts or groups.

With the Q2 2011 release of Telerik Extensions for ASP.NET MVC a new operation mode was introduced - client operation mode. When it is enabled the grid will make only one request to the server and retrieve all data. After that all operations (paging, sorting, filtering and grouping) will be performed client-side. This would improve performance and will eliminate the need to hit the server for data.

To enable client operation mode you should use the OperationMode method:

CopyEnabling client operation mode
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .DataBinding(dataBinding => dataBinding
             .Ajax()
                   .OperationMode(GridOperationMode.Client) // <-- set the operation mode
                   .Select("Select", "Home")
        )
        .Pageable()
        .Sortable()

See Also