Telerik Grid Quick Reference

Table of Contents [Hide/Show]

Partial View Code


Naming the Grid


Specifying the Primary Key for Rows

.DataKeys(keys => keys.Add(i => i.PrimaryKeyField)


.Columns(columns =>
    columns.Bound(i => i.Field
        . . .

Column Heading.Title("ColumnHeading")
Data Formatting.Format("{0:MM/dd/yyyy}")
Alignment.HtmlAttributes(new { style="text-align:right;"})

Actions Column

An Actions column normally can contain buttons to edit or delete a grid row, and while the grid row is being inline edited, will contain buttons to save or cancel the changes.

.Columns(columns =>
    columns.Command(commands =>


Enabling an Insert Dialog without an Edit button

If you want your grid to have an Insert button (in the Toolbar), but not an Edit button (in an Actions) column, use the following snippet, noting three things.

  1. The edit button must be in its own column; otherwise, the Insert dialog won't have an Insert or Cancel button
  2. You must call the .Hidden() method for the column; otherwise, the column header will display
  3. You must add the .HtmlAttributes() method as shown; otherwise, the column contents will display.

columns.Command(c => c.Edit()).Hidden().HtmlAttributes(new{style="display:none;"});


The third parameter (for the Select, Delete, Update, and Insert), is optional and submits additional data to the controller method.

.DataBinding(dataBinding => dataBinding
    .Select("SelectMethod", "SelectController", new { orderId = Model })
    .Delete("DeleteMethod", "DeleteController", new { orderId = Model })
    .Update("UpdateMethod", "UpdateController", new { orderId = Model })
    .Insert("InsertMethod", "InsertController", new { orderId = Model })

Toolbar for Insert Command

.ToolBar(commands =>
    commands.Insert().ImageHtmlAttributes(new { style = "margin-left:0" });

Detail View

.DetailView(o => o.ClientTemplate(
	"<div id='Detail_<#= PrimaryKeyField #>' dbid='<#= PrimaryKeyField #>'>"
	+ "<span><img src='/graphics/Site/busy.gif' />Loading ...</span>"
	+ "</div>"

Client-Side Events

The argument to each of these methods is the name (without arguments or even parentheses) of the JavaScript function to call when the event fires.

.ClientEvents(e =>

Supporting JavaScript

function onDetailViewExpand(e) {

    var div = $(e.detailRow.cells[1]).find("div");
    var id = div.attr("id");
    var dbid = div.attr("dbid");

                    id: dbid
                'div#' + id
function onDetailViewCollapse(e) {

    var div = $(e.detailRow.cells[1]).find("div");
    var id = div.attr("id");
    var dbid = div.attr("dbid");
    $('div#' + id).replaceWith("<div id='Detail_" + dbid + "' "
                                + "dbid='" + dbid + "'>"
                                + "<span><img src='/graphics/Site/busy.gif' />Loading ...</span>"
                                + "</div>");



.Sortable)If present, the grid can be sorted
.Filterable()If present, the grid can be filtered
.Selectable()If present, clicking on the grid selects an entire row
.Editable(e => e.Mode(GridEditMode.Popup)}Configures how rows are edited
.Pageable(settings => settings.PageSize(10).Style(GridPagerStyles.NextPreviousAndInput))Configures data paging