• You have all the required components installed.
• Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the Grid UI component).
• All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

Important
Linq to Sql and the Northwind database are used throughout the Grid documentation for databinding unless a different database/model is specified. The tutorials require basic Linq to Sql knowledge and assume that a working Northwind datacontext has been set up beforehand.

The following example shows how to bind the Grid UI component to the Orders table of the Northwind database. The default template for a new ASP.NET MVC application is used.

• Modify the Index.aspx and make it a strongly typed view where the model is IEnumerable<Order>. The Order type is generated by adding the Orders table of the Northwind datacontext.
  CopyXML

  <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
      Inherits="System.Web.Mvc.ViewPage<IEnumerable<Order>>" %>

  Note
  Having a strongly typed view is not mandatory but makes the Grid declaration easier.

• Modify the Index action method of the HomeController to supply the Orders as the model of the view.
  CopyC#

  public ActionResult Index()
  {
     ViewData["Message"] = "Welcome to ASP.NET MVC!";
  
     NorthwindDataContext northwind = new NorthwindDataContext();
  
     return View(northwind.Orders);
  }

• Paste the following code in Index.aspx.
  CopyC#

  <%= Html.Telerik().Grid(Model)
          .Name("OrdersGrid")
          .Columns(columns =>
          {
              columns.Bound(o => o.OrderID);
              columns.Bound(o => o.ShipAddress);
              columns.Bound(o => o.RequiredDate);
          })
          .Pageable()
          .Sortable()
  %>

• Build and run your ASP.NET MVC application. It should show the following:
  

Now lets explain the Grid declaration code:

• The Grid method is used to create a Grid UI component and set its datasource. In this example we are passing the Model property of the view which is of type IEnumerable<Order>.

  Note

  There are other supported ways to databind the grid. Here is an equivalent example: CopyC# <% Html.Telerik().Grid<Order>() .Name("OrdersGrid") .BindTo(Model) .Columns(columns => { /*code to define the columns*/}}) .Pageable() .Sortable() .Render(); %> Here the BindTo method is used to set the datasource. The type of the data item is specified via the Grid method. The Grid componet always requires the type of the data item it is being bound to.

• The Name is used to specify the unique name of the Grid component which is later output as the id HTML attribute. Setting the name is mandatory and exception would be thrown otherwise.
• The Columns(Action<(Of <<'(GridColumnFactory<(Of <<'(UTP>)>>)>)>>)) is used to define the columns of the Grid component. The Add(Expression<(Of <<'(Func<(Of <<'(UTP, Object>)>>)>)>>)) method is used to add a new column to the grid. The expression passed as argument is used to specify the property of the data item (the Order class in this case) which the column is bound to.
• The Pageable()()()() method is used to enable paging with default settings (displaying 10 items per page, using the NextPreviousAndNumeric as pager style).
• The Sortable()()()() method is used to enable sorting with default settings (sort mode set to SingleColumn).
• Finally the Render method outputs the HTML of the Grid component.

  Important
  It is mandatory that the Render method is called when using <% Html.Telerik().Grid() %>. If not the component will not output any HTML. If using <%= Html.Telerik().Grid() %> you should not use the Render method - the Grid component will be automatically rendered. However when using <%= %> you cannot define templates which use <% %> blocks.

Other Resources