Telerik Grid Quick Reference

Table of Contents [Hide/Show]

   Partial View Code
      Naming the Grid
      Specifying the Primary Key for Rows
      Columns
      Actions Column
         Enabling an Insert Dialog without an Edit button
      DataBinding
      Toolbar for Insert Command
      Detail View
      Client-Side Events
         Supporting JavaScript
      Miscellaneous

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)

PrimaryKeyField should be a member of BusinessObjectType (above)

Columns¶

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

Method	Example
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.

The edit button must be in its own column; otherwise, the Insert dialog won't have an Insert or Cancel button
You must call the .Hidden() method for the column; otherwise, the column header will display
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¶

The ajaxReloadElement function can be found here.
The server code for /MyController/GetMyGridDetail, having a return type of ActionResult, simply returns a View.

/*===========================================================================================*/
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¶

Method	Description
`.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