Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Page History: Telerik Grid Quick Reference

Compare Page Revisions



« 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

@{
    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();
        . . .
})

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

  • 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

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

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.