Monday, February 4, 2013

Using a detailed template in a Kendo UI grid...

Just a note to myself (and this may be useful to someone else). This was using MVC3/Razor with a Kendo UI grid control. Special gotcha's in RED.


To use a detailed template in a kendo grid…

Specify the template id in the grid you are creating
@(Html.Kendo().Grid<PortalRolesModel>()
.Name("roleGrid")
   à  .ClientDetailTemplateId("roleDetailTemplate") ß
.Columns(columns =>
       {
          columns.Bound(c => c.RoleName);
          columns.Bound(c => c.UsersInRole).Width(100).HtmlAttributes(new { style = "text-align: center;" });
       })
       .Pageable()
       .Sortable()
       .DataSource(dataSource => dataSource
         .Ajax()
         .Read(read => read.Action("RoleSelect", "AccountAdministration"))
         .Model(model => model.Id(p => p.RoleName))))

Then script the template for the detailed view:

<script id="roleDetailTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<SelectUserModel>()
       .Name("Roles_#=RoleName#")
       .ToolBar(toolbar=>toolbar.Create().Text("Add User To Role"))
       .Columns(columns =>
           {
               columns.Bound(ud => ud.UserName);
               columns.Bound(ud => ud.LastLoginDate).Format("{0:dd MMM yyyy hh:mm:ss tt}").Width(170);
               columns.Bound(c => c.IsOnline)
                   .Title("Online")                     
                à .ClientTemplate("\\#= IsOnline ? '&#10003;' : '' \\#") ß Must use \\# in client templates in a detailed template for this to work as just # won’t do anything.
                   .HtmlAttributes(new { style = "text-align:center;" })
                   .Width(50);
               columns.Command(commands => commands.Destroy().Text("Remove")).Width(95);
           })
       .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation("Remove user from role?"))
       .DataSource(dataSource => dataSource
           .Ajax()
           .Read(read => read.Action("UsersInRolesHierarchyAjax", "AccountAdministration", new { roleName = "#=RoleName#" }))
           .Create(create => create.Action("AddUserToRole", "AccountAdministration", new { roleName = "#=RoleName#" }))
           .Destroy(destroy => destroy.Action("RemoveUserFromRole", "AccountAdministration", new { roleName = "#=RoleName#" }))
           .Model(model => model.Id(p => p.UserName)))
        à .ToClientTemplate()) ß IMPORTANT
</script>

1 comment:

  1. Amazing.... save me a lot of time... thanks...
    This should be in kendo docs.

    ReplyDelete