Telerik Grid Quick Reference

Table of Contents [Hide/Show]


Partial View Code

@{
    Html.Telerik().Grid<BusinessObjectType>()
        .OtherMethod1()
        .OtherMethod2()
        .OtherMethod3()
        .Render();
} 

Naming the Grid

.Name("GridName")

Specifying the Primary Key for Rows

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


Columns

.Columns(columns =>
{
    columns.Bound(i => i.Field
        .ColumnMethod1()
        .ColumnMethod2();
        . . .
})

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

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 =>
    {
        commands.Edit();
        commands.Delete();
    }).Width(50).Title("Actions").Hidden(readOnly);

})

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;"});

DataBinding

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

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

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 =>
{
    e.OnEdit("onEdit");
    e.OnDataBound("onDataBound");
    e.OnDetailViewExpand("onDetailViewExpand");
    e.OnDetailViewCollapse("onDetailViewCollapse");
})

Supporting JavaScript


/*===========================================================================================*/
function onDetailViewExpand(e) {

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

    ajaxReloadElement(
                '/MyController/GetMyGridDetail',
                {
                    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>");

}
/*===========================================================================================*/

Miscellaneous

MethodDescription
.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