Compare Page Revisions
« Older Revision - Back to Page History - Newer Revision »
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
@{ Html.Telerik().Grid<BusinessObjectType>() .OtherMethod1() .OtherMethod2() .OtherMethod3() .Render(); }
.Name("GridName")
.DataKeys(keys => keys.Add(i => i.PrimaryKeyField)
.Columns(columns => { columns.Bound(i => i.Field .ColumnMethod1() .ColumnMethod2(); . . . })
.Title("ColumnHeading")
.Format("{0:MM/dd/yyyy}")
.HtmlAttributes(new { style="text-align:right;"})
.Visible(@Model.ShowMyColumn)
.Columns(columns => { columns.Command(commands => { commands.Edit(); commands.Delete(); }).Width(50).Title("Actions").Hidden(readOnly); })
.Hidden()
.HtmlAttributes()
columns.Command(c => c.Edit()).Hidden().HtmlAttributes(new{style="display:none;"});
Select
Delete
Update
Insert
.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(commands => { commands.Insert().ImageHtmlAttributes(new { style = "margin-left:0" }); })
.DetailView(o => o.ClientTemplate( "<div id='Detail_<#= PrimaryKeyField #>' dbid='<#= PrimaryKeyField #>'>" + "<span><img src='/graphics/Site/busy.gif' />Loading ...</span>" + "</div>" ))
.ClientEvents(e => { e.OnEdit("onEdit"); e.OnDataBound("onDataBound"); e.OnDetailViewExpand("onDetailViewExpand"); e.OnDetailViewCollapse("onDetailViewCollapse"); })
ajaxReloadElement
/MyController/GetMyGridDetail
ActionResult
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>"); } /*===========================================================================================*/
.Sortable)
.Filterable()
.Selectable()
.Editable(e => e.Mode(GridEditMode.Popup)
.Pageable(settings => settings.PageSize(10).Style(GridPagerStyles.NextPreviousAndInput))
ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.