Telerik Extensions for ASP.NET MVC

This help topic shows how to configure the columns displayed by Telerik Grid for ASP.NET MVC.

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)

Column Definition

To define the columns of your grid you should use the Columns method:

CopyGrid column definition
<% Html.Telerik().Grid(Model)
       .Name("Orders")
       .Columns(columns =>
       {
          //Column which will display the OrderID property of the Order
          columns.Bound(o => o.OrderID);

          //Column which will display the OrderDate property. The header will display "Order"
          columns.Bound(o => o.OrderDate).Title("Order");

          //Template column which shows an action link
          columns.Template(o => 
          {
              %>
                  <%= Html.ActionLink("Edit", "Home", new { id = o.OrderID }) %>
              <%
          }).Title("Edit");
       })
       .Render();
%>

In this example we have defined two bound columns and a single template column. The main difference between template and bound columns is that a bound column displays a property of the data item whereas the template column may display anything. Template columns cannot be sorted or filtered. If you need a bound column but you want to tweak the way its value is rendered you can use the Template method.

Note
If no columns are defined the grid will try to generate them automatically from the underlying model. Every public property that is of primitive .NET type will be added as a column.
Important
If template columns are defined the <% Html.Telerik().Grid().Render(); %> definition should be used instead of <%= Html.Telerik().Grid() %>
Important
If you need templates in client side binding scenarios you can use the ClientTemplate method of a bound column:
CopyUsing Format as client-side template
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(c => c.CustomerID).ClientTemplate(
            "<strong><#= ClientID #></strong>"
            ).Title("Edit");
        })
%>

Common Column Settings

Hiding grid columns

The Hidden method will hide a grid column. The column would be rendered but won't be visible to the end user.
CopyHiding a column
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Hidden(true);  
        })
%>
Note
There is a subtle difference between the Hidden and Visible methods. Hidden columns are rendered but not visible whilst inivisible columns are not rendered at all.

Setting the HTML attributes of the column header

The HeaderHtmlAttributes method is used to apply HTML attributes for the column header (the <th> tag rendered for the column in the grid header).
CopySetting header HTML attributes
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).HeaderHtmlAttributes(new {@class="order-id-column"}});  
        })
%>
In this code snippet the class HTML attribute is set to "order-id-column".

Setting the HTML attributes for the column cells

The HtmlAttributes method is used to apply HTML attributes for the column cell (the <td> tag rendered for each row in the grid).
CopySetting cell HTML attributes
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).HtmlAttributes(new {@class="order-id-cell"}});  
        })
%>
In this code snippet the class HTML attribute is set to "order-id-cell".

Setting the title of the column

The Title method is used to set the title of the column:
CopySetting the title
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Title("ID");  
        })
%>
In this code snippet the title of the column is set to "ID".
Note
By default the grid will infer the title of a column from the property of the data item. For example if the column is bound to the "OrderID" property the inferred title is "Order ID". Use the Title method if you want to override this behavior.

Setting the width of the column

The Width method is used to set the width of the column in pixels.
CopySetting the width
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Width(200);  
        })
%>
In this code snippet the width of the column is set to 200px.

Making a column invisible

The Visible method cane make the column invisible. Invisible columns are not rendered.
CopyMaking a column invisible
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Hidden(true);  
        })
%>
Note
There is a subtle difference between the Hidden and Visible methods. Hidden columns are rendered but not visible whilst inivisible columns are not rendered at all.

Bound Column Settings

Setting the template used in clien-side binding (Ajax or WebService)

The ClientTemplate sets fhe client template string for the column.
CopySpecifying client-side template
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).ClientTemplate("<strong><#= OrderID #></strong>");
        })
%>
Client-side expressions <#= <member> #> can be used in the client template as server side expressions <%= dataItem.<member> %> . However you can evaluate only members of the data object which are serialized as JSON. For example this client-side expression: <#= OrderID #> is the equivalent of this server side expression: <%= o.OrderID %> .

HTML encoding the contents of the column

The Encoded enables or disables HTML encoding for the column.
CopyDisabling HTML encoding
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Encoded(false);
        })
%>
Note
By default bound columns are HTML-encoded which means that the < and > symbols found in the cell contents are replaced with < and >

Enabling/disabling filtering for the column

The Filterable enables or disables filtering for the column.
CopyDisabling filtering for a column
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Filterable(false);
        })
        .Filterable()
%>
In this code snippet filtering by the "OrderID" column is disabled.
Important
By default all bound columns are filterable. Using the Filterable method has no effect if filtering of the grid is not globally enabled:
CopyEnabling filtering for the grid
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Filterable()
%>

Setting the format string for the column

The Format sets fhe format string for the column.
CopySpecifying format string
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderDate).Format("{0:dd/MM/yyyy}");
        })
        .Filterable()
%>
In this code snippet the display format for the "OrderDate" column is set to "dd/MM/yyyy".
Important
Currently number formatting is supported only in Server Binding mode. Client-side support for number formatting will be implemented in a future release.
Note
Format can also be used to define client-side templates:
CopyUsing Format as client-side template
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerID).Format(
                "<img src='>" + Url.Content("~/Content/Images/Customers/") + 
                "{0}.jpg' alt='{0}' />"
            ).Encoded(false).Title("Avatar");
        })
%>

Enabling/disabling grouping for the column

The Groupable method enables or disable grouping by that column.
CopyDisabling grouping for a column
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Groupable(false);
        })
        .Groupable()
%>
In this code snippet grouping by the "OrderID" column is disabled.
Important
By default all bound columns are groupable. Using the Groupable method has no effect if grouping is not globally enabled:
CopyEnabling grouping
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Groupable()
%>

Making a column read-only

You can use the ReadOnly method to make a column read-only. This means that the column will not participate in editing.
CopyMaking a column read-only
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).ReadOnly();
        })
%>

Enabling/disabling sorting for the column

The Sortable enables or disables sorting for the column.
CopyDisabling sorting for a column
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Sortable(false);
        })
        .Sortable()
%>
In this code snippet sorting by the "OrderID" column is disabled.
Important
By default all bound columns are sortable. Using the Sortable method has no effect if sorting of the grid is not globally enabled:
CopyEnabling sorting for the grid
<%= Html.Telerik().Grid(Model)
        .Name("Orders")
        .Sortable()
%>

Setting the template used in server-side binding

The Template method defines the template for a bound column.
CopySpecifying server-side template
<% Html.Telerik().Grid(Model)
        .Name("Orders")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Template(o => 
            {
                 %> <strong><%= o.OrderID %></strong> <%  
            });
        })
        .Sortable()
        .Render();
%>

See Also