Telerik Extensions for ASP.NET MVC

This example shows how to use the server detail template - the detail template used in server binding scenarios.

Important notes:

1. Use the Template method to set the server template (used only for server 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: Name("TabStrip_" + e.EmployeeID).
3. Calling the Render method is required in order to output the contents of any UI components defined in the server detail template.

Example:

<% Html.Telerik().Grid(Model)
    .Name("Employees")
    .DetailView(detailView => detailView.Template(e =>
    {
        %>
            <% Html.Telerik().TabStrip()
                .Name("TabStrip_" + e.EmployeeID)
                .SelectedIndex(0)
                .Items(items =>
                {
                    items.Add().Text("Orders").Content(() =>
                    {
                        %>
                            <%= Html.Telerik().Grid(e.Orders)
                                   .Name("Orders_" + e.EmployeeID)
                                   .Pageable()
                                   .Sortable()
                            %>
                        <%
                    });
                    items.Add().Text("Contact Information").Content(() =>
                    {
                        %>
                            <div class="employee-details">
                                <ul>
                                    <li>
                                        <label>Birth Date:</label><%= e.BirthDate.Value.ToString("d") %>
                                    </li>
                                    <li>
                                        <label>Country:</label><%= e.Country %>
                                    </li>
                                    <li>
                                        <label>City:</label><%= e.City %>
                                    </li>
                                    <li>
                                        <label>Address:</label><%= e.Address %>
                                    </li>
                                    <li>
                                        <label>Home Phone:</label><%= e.HomePhone %>
                                    </li>
                                </ul>
                            </div>
                        <%
                    });                                                       
                })
                .Render();
             %>
        <%    
    }))
    .Pageable(paging => paging.PageSize(5))
    .Sortable()
    .Render();
%>