Telerik Extensions for ASP.NET MVC

This help topic shows how to bind Telerik Grid for ASP.NET MVC to a web service

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 can be easily bound to a web service - ASMX or WCF. The following example shows how:

  • First let's create the web service method that will return data to populate the grid:
    CopyWebService - ASMX
    [WebService(Namespace = "http://tempuri.org/")]
    [ScriptService]
    public class OrdersAsmx : System.Web.Services.WebService
    {
        [WebMethod]
        public GridModel GetOrders(GridState state)
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
    
            return northwind.Orders.ToGridModel(state);
        }
    }

    We are using the GridModel as a return type. It accepts an argument of type GridState called state. It contains the current grid state - current page, sort, filter and group expressions.

    The [M:Telerik.Web.Mvc.Extensions.QueryableExtensions.ToGridModel``1(System.Linq.IQueryable{``0}, Telerik.Web.Mvc.GridState)] extension method is using the built-in Linq expression engine to do the paging, sorting and filtering. Again this is not mandatory but will save you the hassle to do those operations by yourself.

  • Here is how the grid should be configured in the view so it is bound to the web service:
    CopyView
    <%= Html.Telerik().Grid<Order>()
            .Name("Orders")
            .DataBinding(dataBinding => dataBinding
                 //Web Service binding
                 .WebService()
                      //Url from which to get the data
                      .Select("~/Models/Orders.asmx/GetOrders")
            )
    %>
    Important
    Currently Telerik Grid for ASP.NET MVC can only be bound to local web services (in the same domain) using the HTTP POST method.

See Also