Telerik Extensions for ASP.NET MVC

This help topic discusses the Server binding of 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)

By default the Telerik Grid for ASP.NET MVC will perform server side requests (HTTP GET) when doing paging, sorting and filtering. This is called "Server binding".

To bind the grid with data you just need to set its data source and render the view. There are a few ways to do so:

  • If the view is strongly typed you can use its Model property:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Orders")
            .Pageable()
            .Sortable()
    %>
    CopyController
    public ActionResult Index()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();
    
        return View(northwind.Orders);
    }
  • You can also use the BindTo method. Then you need to explicetly specify the type of the data item:
    CopyView
    <%= Html.Telerik().Grid<Order>()
            .Name("Orders")
            .BindTo((IEnumerable<Order>)ViewData["orders"])
            .Pageable()
            .Sortable()
    %>
    CopyController
    public ActionResult Index()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();
        ViewData["orders"] = northwind.Orders;
    
        return View();
    }
  • There is also an overload allowing you to specify the key in the ViewData:
    CopyView
    <%= Html.Telerik().Grid<Order>("orders")
            .Name("Orders")
            .Pageable()
            .Sortable()
    %>
    CopyController
    public ActionResult Index()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();
        ViewData["orders"] = northwind.Orders;
    
        return View();
    }

Telerik Grid for ASP.NET MVC is using its build-in Linq expression engine. This means that you don't need to care for paging, sorting and filtering the data. You only need to provide an IQueryable<T> and the grid will do the rest pushing the paging, sorting and filtering expressions to the underlying IQueryable provider. The provider is responsible for executing those expressions to the database server.

Here is how to configure your action method in order to bind the grid to the Orders table from the Northwind database:

CopyC#
public ActionResult Index()
{
   NorthwindDataContext northwind = new NorthwindDataContext();

   return View(northwind.Orders);
}
This is all the required code. The grid will use the same action method and add various query string parameters in order to perform paging, sorting and filtering. Here is how a typical URL would look like: http://localhost:4939/?OrdersGrid-orderBy=OrderID-asc&OrdersGrid-page=8

Query String Parameters

The grid will use its Name to prefix the query string parameters as can be seen from the aforementioned sample URL. This is required so more than one grid configured with server binding can exist in the same view.

Important
There is a limit of the query string length which varies between the different browsers. If using more than one grid in your view consider using Ajax Binding to avoid exceeding the maximum query string length. If it is exceeded the URL will be truncated which will cause loss of grid state.
If only one grid is needed the prefix can be easily disabled via the PrefixUrlParameters(Boolean) method:
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .PrefixUrlParameters(false)
        .Pageable()
        .Sortable()
Then the url would like like: http://localhost:4939/?orderBy=OrderID-asc&page=8

Configuring the Server binding

Sometimes the action method which renders the view containing 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
             //Server binding
             .Server()
                  //Action method
                  .Select("Index", "Home", new {id = (string)ViewData["id"]})
        )
        .Pageable()
        .Sortable()
CopyController
public class HomeController : Controller
{
    public ActionResult Index(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;
       }

       ViewData["id"] = id ?? string.Empty;

       return View(orders);
    }
}

See Also