This example shows how to use the client detail template - the detail template used in ajax and web service binding scenarios.

Important notes:

  1. Use the ClientTemplate method to set the client template (used only for ajax and web wervice binding scenarios).
  2. Make sure the Name of any UI component defined in the template is unique. A property of the bound object can be used to ensure such uniqueness by utilizing client binding expressions: Name("Orders_<#= EmployeeID #>").
  3. Calling the ToHtmlString method is required in order to output the contents of any UI components defined in the client detail template.
  4. If the master grid is client bound (ajax or web service) so must be the child grids (defined in the client detail template).

Example:

<%= Html.Telerik().Grid<EmployeeViewModel>()
        .Name("Employees")
        .DetailView(details => details.ClientTemplate(
            Html.Telerik().TabStrip()
                .Name("TabStrip_<#= EmployeeID #>")
                .SelectedIndex(0)
                .Items(items =>
                {
                    items.Add().Text("Orders").Content(
                            Html.Telerik().Grid<OrderViewModel>()
                                .Name("Orders_<#= EmployeeID #>")
                                .DataBinding(dataBinding => dataBinding.Ajax()
                                .Select("_OrdersForEmployeeDetailsAjax", "Grid", new { employeeID = "<#= EmployeeID #>" }))
                                .Pageable()
                                .ToHtmlString());
                    items.Add().Text("Contact Information").Content(
                        "<div class='employee-details'>" +
                            "<ul>" + 
                                "<li><label>Birth Date:</label><#= $.telerik.formatString('{0:d}', BirthDate) #></li>" +
                                "<li><label>Country:</label><#= Country #></li>" +
                                "<li><label>City:</label><#= City #></li>" +
                                "<li><label>Address:</label><#= Address #></li>" +
                                "<li><label>Home Phone:</label><#= HomePhone #></li>" +
                            "</ul>" +
                        "</div>"    
                        );
                })
                .ToHtmlString()
        ))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_EmployeesDetailsAjax", "Grid"))
        .Scrollable(scrolling => scrolling.Height(555))
    %>