Telerik Extensions for ASP.NET MVC

This help topic shows how to customize the way a grid row looks by settings the row template.

This topic contains the following sections.

Server-side row template

The server side row template is used to customize the appearance of all grid rows when server binding is used.

Normally a grid row is output as a series of table cells (<td> HTML elements). Consider this grid configuration which uses the Northwind Customers table for a model:

CopyGrid configuration
<%= Html.Telerik().Grid<Customer>(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerID);
            columns.Bound(c => c.ContactName);
            columns.Bound(c => c.Country);
        })
%>

The output HTML for the first row will looks like this by default:

CopyDefault row HTML output
<tr>
   <td>ALFKI</td>
   <td>Maria Anders</td>
   <td>Germany</td>
</tr>

If you want to customize the way the grid rows are output you can use the RowTemplate:

CopyUsing RowTemplate
<% Html.Telerik().Grid<Customer>(Model)
       .Name("Grid")
       .Columns(columns =>
       {
           columns.Bound(c => c.CustomerID);
           columns.Bound(c => c.ContactName);
           columns.Bound(c => c.Country);
       })
       .RowTemplate(c =>
       {
        %>
            <ul>
               <li>CustomerID: <%= c.CustomerID %></li>
               <li>Contact Name: <%= c.ContactName %></li>
               <li>Country: <%= c.Country %></li>
            </ul>
        <%
       })
       .Render();
%>

The output HTML for the first row will now look like this:

CopyDefault row HTML output
<tr>
   <td colspan="5">
     <ul>
        <li>CustomerID: ALFKI</li>
        <li>Contact Name: Maria Anders</li>
        <li>Country: Germany</li>
     </ul>
   </td>
</tr>
Note
Even if you use the RowTemplate the grid will still display the column headers for all defined columns.

It is also possible to add grid command buttons in the RowTemplate which are typically defined in a command column. Here is how:

CopyDefining command buttons in RowTemplate
<% Html.Telerik().Grid<Customer>(Model)
       .Name("Grid")
       .Columns(columns =>
       {
           columns.Bound(c => c.CustomerID);
           columns.Bound(c => c.ContactName);
           columns.Bound(c => c.Country);
       })
       .RowTemplate((c, grid) =>
       {
        %>
            <ul>
               <li>CustomerID: <%= c.CustomerID %></li>
               <li>Contact Name: <%= c.ContactName %></li>
               <li>Country: <%= c.Country %></li>
            </ul>
            <!-- Define an edit button  -->
            <%= grid.EditButton(c) %>
            <!-- Define a delete button (you can set the button type as well)  -->
            <%= grid.DeleteButton(c, GridButtonType.TextAndImage) %>
        <%
       })
       .Render();
%>
Important
Note that if you need to define command buttons in the RowTemplate a different overload of the RowTemplate method is used - RowTemplate(Action<T, Grid<T>>).

Here is how to define command buttons using Razor syntax:

CopyDefining command buttons in RowTemplate (Razor)
@{
   Html.Telerik().Grid<Customer>(Model)
       .Name("Grid")
       .Columns(columns =>
       {
           columns.Bound(c => c.CustomerID);
           columns.Bound(c => c.ContactName);
           columns.Bound(c => c.Country);
       })
       .RowTemplate(grid => @<text>
            <ul>
               <li>CustomerID: @item.CustomerID</li>
               <li>Contact Name: @item.ContactName</li>
               <li>Country: @item.Country</li>
            </ul>
            <!-- Define an edit button  -->
            @grid.EditButton(item)
            <!-- Define a delete button (you can set the button type as well)  -->
            @grid.DeleteButton(item, GridButtonType.TextAndImage)
        </text>
        )
       .Render();
}

Client-side row template

The client side row template is used to customize the appearance of all grid rows when client binding (ajax or web service) is used.

Here is a how to implement the previous exapmples using the ClientRowTemplate:

CopyUsing ClientRowTemplate
<%= Html.Telerik().Grid<Customer>()
       .Name("Grid")
       .DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller"))
       .Columns(columns =>
       {
           columns.Bound(c => c.CustomerID);
           columns.Bound(c => c.ContactName);
           columns.Bound(c => c.Country);
       })
       .ClientRowTemplate(grid => "<ul>" +
               "<li>CustomerID: <#= CustomerID #></li>" +
               "<li>Contact Name: <#= ContactName #></li>" +
               "<li>Country: <#= Country #></li>" +
            "</ul>" 
       )
%>

And here is how to define command buttons via ClientRowTemplate:

CopyDefining command buttons using ClientRowTemplate
<%= Html.Telerik().Grid<Customer>()
       .Name("Grid")
       .DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller"))
       .Columns(columns =>
       {
           columns.Bound(c => c.CustomerID);
           columns.Bound(c => c.ContactName);
           columns.Bound(c => c.Country);
       })
       .ClientRowTemplate("<ul>" +
               "<li>CustomerID: <#= CustomerID #></li>" +
               "<li>Contact Name: <#= ContactName #></li>" +
               "<li>Country: <#= Country #></li>" +
            "</ul>" + 
            grid.EditButton(null) +
            grid.DeleteButton(null)
       )
%>
Important
Batch editing mode is not supported if ClientRowTemplate is used.