Page History: Telerik Grid Quick Reference

Compare Page Revisions

1 0 Current 1 0

« Older Revision - Back to Page History - Current Revision

Page Revision: Thu, Oct 27, 2011, 4:09 PM

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.

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¶

• 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