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>