CopyC#

<%= Html.Telerik().Grid(Model)
%>

CopyC#

<%= Html.Telerik().Grid<Order>()
        .BindTo((IEnumerable<Order>)ViewData["Orders"])
%>

• Define a server template as well (requires at least version Q1 2010 SP1 - 2010.1.416):
  CopyDefining both server and client template

  <% Html.Telerik().Grid(Model)
         .Name("Grid")
         .Columns(columns =>
         {
            columns.Bound(o => o.OrderID)
                   .ClientTemplate("<strong>OrderID</strong>")
                   .Template(o =>
                   { %>
                        <strong><%= o.OrderID %></strong>
                     <%
                   });
         })
         .Render();
  %>

• Avoid the initial server binding by not using the constructor which accepts datasource or remove the call of BindTo:

  Before	After
  CopyC# <%= Html.Telerik().Grid(Model) // Model is IEnumerable<Order> %>	CopyC# <%= Html.Telerik().Grid<Order>() // No longer passing a datasource %>
  CopyC# <%= Html.Telerik().Grid<Order>() .BindTo((IEnumerable<Order>)ViewData["Orders"]) %>	CopyC# <%= Html.Telerik().Grid<Order>() // No longer calling the BindTo method %>

• Set the client template as well:
  CopyClient template

  <%= Html.Telerik().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
          {
               columns.Add(c => c.CustomerID)
                      .Template(c =>
                       {
                         %>
                             <%= Html.ActionLink("Edit", "Edit", new {id = c.CustomerID}) %>
                         <%
                       })
                      .ClientTemplate("<a href='" + Url.Action("Edit", "Home") + "/<# CustomerID #>Edit</a>")
                      .Title("Edit");
          })
  %>

• Use Format:
  CopyUsing Format

  <%= Html.Telerik().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
          {
               columns.Add(c => c.CustomerID)
                      .Format(Html.ActionLink("Edit", "Home", new { id = "{0}"}}))
                      .Encoded(false)
                      .Title("Edit");
          })
  %>

• Use the rowDataBound event:
  CopyTemplate using rowDataBound

  function onRowDataBound(e) {
      //`this` is the DOM element of the grid
      var grid = $(this).data('tGrid');
  
      //the DOM element (<tr>) representing the row which is being databound
  
      var row = e.row;
  
      //the data item - JSON object.
  
      var dataItem = e.dataItem;
  
      //You can use the OnRowDataBound event to customize the way data is presented on the client-side
  
      row.cells[0].innerHTML = '<a href="/Home/Edit/' + dataItem.CustomerID + '">Edit</a>';
  }

  Important
  In versions prior to 2010.1.416 (Q1 2010 SP1) you cannot speciy both server and client template. If upgrading is not an option you should set only the client template or use Format or OnRowDataBound.

The reason for this error is a server side exception which occurrs during the invocation of the action method. You can use a sniffer tool such as Fiddler (for Internet Explorer) or FireBug (for Firefox) to inspect the server response which in most cases will contain the stacktrace of the exception.

A common exception is "A circular reference was detected while serializing an object of type" followed by some type name. The reason for this exception is a circular reference in the objects used to databind the grid. A common example for a circular object reference is the Orders - Customers relationship in the Northwind database:

1. Hide the reference properties to avoid the circular reference problem:
   • For Entity Framework you can change the visibility of the association property. Anything but "public" will do:
   • For Linq to Sql you can avoid generating the association property altogether:
2. Use ViewModel object instead of the original object created by the O/R mapping tool. This is the recommended approach as it does not require any modifications to the model objects.
3. Create a new class which will contain only the properties required for databinding the grid (properties mapped to grid columns that is).
   CopyOrders ViewModel

   public class OrderViewModel
   {
       public int OrderID
       {
           get;
           set;
       }
   
       public DateTime? OrderDate
       {
           get;
           set;
       }
   
       public string ShipAddress
       {
           get;
           set;
       }
   }

   Note
   If binding to EF make sure you add the key property (OrderID in this case) to the ViewModel even if you are not displaying it in the grid. Otherwise you will end up with NotSupportedException saying "Cannot find primitive type or property to sort by". This is required by the Entity Framework LINQ provider.

4. In your view configure the grid to bind to the ViewModel type instead:
   CopyView

   <%= Html.Telerik().Grid<Models.OrdersViewModel>(Model)
                     .Name("Grid")
                     .Ajax(ajax => ajax.Action("AjaxIndex", "Home"))
   %>

5. In your controller create ViewModel objects:
   CopyController - Returning ViewModel objects

   public ActionResult Index()
   {
       var model = from o in new NorthwindEntities().Orders
                   select new OrderViewModel
                   {
                       OrderID = o.OrderID,
                       OrderDate = o.OrderDate,
                       ShipAddress = o.ShipAddress
                   };
       return View(model);
   }
   
   [GridAction]
   public ActionResult AjaxIndex()
   {
       var model = from o in new NorthwindEntities().Orders
                   select new OrderViewModel
                   {
                       OrderID = o.OrderID,
                       OrderDate = o.OrderDate,
                       ShipAddress = o.ShipAddress
                   };
   
       return View(new GridModel
       {
           Data = model
       });
   }

The OnRowDataBound, OnDataBinding, OnDataBound events are raised only during client-side binding (Ajax Binding or Web Service Binding). Those events are never raised during Server Binding. Make sure the grid is properly configured for Ajax Binding or Web Service Binding.

The OnRowSelected event requires the grid to be Selectable().

• Try to reduce the amount of data which should be serialized. You can enable grid paging for example.
• Increase the value of maxJsonLength by adding the following section to your web.config:
  CopyIncreasing maxJsonLength

  <system.web.extensions>  
     <scripting>  
         <webServices>  
            <jsonSerialization maxJsonLength="2147483644" />
         </webServices>  
     </scripting>  
  </system.web.extensions>

  Important
  This example is setting maxJsonLength to 2147483644 which is the maximum value allowed by the Int32 type.

Other Resources