Telerik Extensions for ASP.NET MVC

Version Q1 2012, released 04/19/2012

Ajax Binding

Drag a column header and drop it here to group by that column
Order ID
Filter
Contact Name
Filter
Ship Address
Filter
Order Date
Filter
No records to display.
Refresh
firstprev
1
nextlast
Displaying items 0 - 0 of 0

About this example ASPXRazor

This example shows how to configure Telerik Grid for ASP.NET MVC to perform Ajax requests for paging, sorting and filtering. This operation mode is referred to as "Ajax binding".

The required steps are:

  1. Configure the Grid to use Ajax binding via the DataBinding method: 
    <%= Html.Telerik().Grid<Order>()
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Grid"))
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Width(81);
            columns.Bound(o => o.Customer.ContactName).Width(200);
            columns.Bound(o => o.ShipAddress);
            columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(100);
        })
%>
  2. The action specified by the Select method should be decorated with the GridAction attribute. It also should use the GridModel class as a model. Those are required to process the model data using the built-in Linq expression engine and return the result in JSON format. If the GridAction attribute is missing the regular view will be rendered instead of JSON. 
    [GridAction]
public ActionResult _AjaxBinding()
{
    return View(new GridModel(GetOrders()));
}

Get more than expected!

Take the Telerik Extensions for ASP.NET MVC to your Visual Studio projects to truly experience their power. Download your free copy now and jumpstart your development with the available learning resources.

The Extensions are offered in both open source and commercial versions the differences between which are well explained in the licensing FAQ.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: