Telerik之grid细则显示与子girdview嵌套

Telerik Extensions for ASP.NET MVC Manual

Client Detail Template and Hierarchy

Send Feedback

Telerik Grid for ASP.NET MVC provides the ability to show additional info for a data item. This is done by defining the detail view for the grid and specifying its server and/or client template.

This help topic shows how to use the client detail view template which is used in ajax and web service binding scenarios.

• Setting the client detail view template
• Creating hierarchy using the client detail view template
• Nesting UI components in the server detail template

Setting the client detail view template

Here is how to display additional details (properties) of the Employee object (from the Northwind database):

CopyClient detail template (View)

<%= Html.Telerik().Grid<MvcApplication.Models.Employee>()
        .Name("Employees")
        .DataBinding(dataBinding => dataBinding.Ajax()
            // Specify the action method which returns the Employee objects
            .Select("_Employees", "Home"))
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName);
            columns.Bound(e => e.LastName);
            columns.Bound(e => e.Title);
        })
        .DetailView(detailView => detailView.ClientTemplate(
            // Set the client template
            "<ul>" +
                "<li>Name: <#= FirstName #> <#= LastName #></li>" +
                "<li>Birth Date: <#= BirthDate #></li>" +
                "<li>Country: <#= Country #></li>" +
                "<li>City: <#= City #></li>" +
                "<li>Home Phone: <#= HomePhone #></li>" +
            "</ul>"
        ))
        // Handle the OnRowDataBound event in order to expand certain rows
        .ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
%>

<script type="text/javascript">
    function onRowDataBound(e) {
        var grid = $(this).data('tGrid');
        // Expand the first row only
        if (grid.$rows().index(e.row) == 0) {
            grid.expandRow(e.row);
        }
    }
</script>

CopyClient detail template (Controller)

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [GridAction]
    public ActionResult _Employees()
    {
        return View(new GridModel(new NorthwindDataContext().Employees));
    }
}

Here is how the end result should look like (using the Forest skin):

Important

The client detail template differs from the server detail template quite a bit: The client template accepts a string whereas the server template requires a delegate (Action<T>). The client template supports client side expressions e.g. <#= FirstName #> whereas the the server template supports server side expressions e.g. <%= e.FirstName %>. Here are two equivalent templates: CopyServer detail view template detailView.Template(e => { %> <ul> <li>Name: <%= e.FirstName %> <%= e.LastName %></li> <li>Birth Date: <%= e.BirthDate.Value.ToString("d") %></li> <li>Country: <%= e.Country %></li> <li>City: <%= e.City %></li> <li>Home Phone: <%= e.HomePhone %></li> </ul> <% }) CopyClient detail view template detailView.ClientTemplate( "<ul>" + "<li>Name: <#= FirstName #> <#= LastName #></li>" + "<li>Birth Date: <#= BirthDate #></li>" + "<li>Country: <#= Country #></li>" + "<li>City: <#= City #></li>" + "<li>Home Phone: <#= HomePhone #></li>" + "</ul>" ))

Creating hierarchy using the client detail view template

You can easily add a grid in the server detail view template in order to create grid hierarchy. Here is how to show the Orders associated with each Employee:

CopyHierarchy via client detail template (View)

<%= Html.Telerik().Grid<MvcApplication.Models.Employee>()
            .Name("Employees")
            .DataBinding(dataBinding => dataBinding.Ajax()
                // Specify the action method which returns the Employee objects
                .Select("_Employees", "Home"))
            .Columns(columns =>
            {
                columns.Bound(e => e.FirstName);
                columns.Bound(e => e.LastName);
                columns.Bound(e => e.Title);
            })
            .DetailView(detailView => detailView.ClientTemplate(
                // Define a grid bound to the Order object
                Html.Telerik().Grid<MvcApplication.Models.Order>()
                     //Ensure the Name of each grid is unique
                     .Name("Orders_<#= EmployeeID #>")
                     .DataBinding(dataBinding => dataBinding.Ajax()
                        // Specify the action method which returns the Orders for a particular Employee
                        // Notice how the `EmployeeID` value is passed as the `id` argument using a client expression
                     .Select("_Orders", "Home", new { id = "<#= EmployeeID #>"}))
                     .Columns(columns =>
                     {
                         columns.Bound(o => o.OrderID);
                         columns.Bound(o => o.ShipName);
                         columns.Bound(o => o.ShipAddress);
                         columns.Bound(o => o.ShipCity);
                     })
                     .Pageable()
                     // The client detail view template requires a string so we are using the ToHtmlString method
                     .ToHtmlString()
            ))
            // Handle the OnRowDataBound event in order to expand certain rows
            .ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
    %>

    <script type="text/javascript">
        function onRowDataBound(e) {
            var grid = $(this).data('tGrid');
            // Expand the first row only
            if (grid.$rows().index(e.row) == 0) {
                grid.expandRow(e.row);
            }
        }
    </script>

CopyHierarchy via client detail template (Controller)

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [GridAction]
    public ActionResult _Employees()
    {
        return View(new GridModel(new NorthwindDataContext().Employees));
    }

    [GridAction]
    public ActionResult _Orders(int id)
    {
        // Return the orders whose EmployeeID is equal to the action parameter
        return View(new GridModel(new NorthwindDataContext().Orders.Where(o => o.EmployeeID == id)));
    }
}

Here is how the end result should look like (using the Web20 skin):

Important

Make sure the Name of any UI component defined in the client detail view template is unique. A client side expression must be used to ensure such uniqueness e.g. Name("Orders_<#= EmployeeID #>") If the master grid is client bound (ajax or web service) so must be the child grids (the ones defined in the client detail view template). The ToHtmlString method of any UI components defined in the client detail view template must be used because the client template requires a string value. Client side expressions can be used for every property of the UI component which requires a value from the parent data item e.g. Name("Orders_<#= EmployeeID #>") Select("_Orders", "Home", new { id = "<#= EmployeeID #>"})

Nesting UI components in the server detail template

The following example shows how to embed Telerik TabStrip for ASP.NET MVC in the grid server detail template.

CopyC#

<%= Html.Telerik().Grid<Hierarchy.Models.Employee>()
            .Name("Employees")
            .DataBinding(dataBinding => dataBinding.Ajax()
                // Specify the action method which returns the Employee objects
                .Select("_Employees", "Home"))
            .Columns(columns =>
            {
                columns.Bound(e => e.FirstName);
                columns.Bound(e => e.LastName);
                columns.Bound(e => e.Title);
            })
            .DetailView(detailView => detailView.ClientTemplate(
                Html.Telerik().TabStrip()
                       // Make the Name unique
                       .Name("TabStrip_<#= EmployeeID #>")
                       .SelectedIndex(0)
                       .Items(items =>
                        {
                             items.Add().Text("Orders").Content(
                                // Define a grid bound to the Order object
                                Html.Telerik().Grid<Hierarchy.Models.Order>()
                                                 //Ensure the Name of each grid is unique
                                     .Name("Orders_<#= EmployeeID #>")
                                     .DataBinding(dataBinding => dataBinding.Ajax()
                                         // Specify the action method which returns the Orders for a particular Employee
                                         // Notice how the `EmployeeID` value is passed as the `id` argument using a client expression
                                     .Select("_Orders", "Home", new { id = "<#= EmployeeID #>" }))
                                     .Columns(columns =>
                                     {
                                         columns.Bound(o => o.OrderID);
                                         columns.Bound(o => o.ShipName);
                                         columns.Bound(o => o.ShipAddress);
                                         columns.Bound(o => o.ShipCity);
                                     })
                                     .Pageable()
                                     .ToHtmlString()
                                 );

                             items.Add().Text("Employee Details").Content(
                                "<ul>" +
                                    "<li>Name: <#= FirstName #> <#= LastName #></li>" +
                                    "<li>Birth Date: <#= BirthDate #></li>" +
                                    "<li>Country: <#= Country #></li>" +
                                    "<li>City: <#= City #></li>" +
                                    "<li>Home Phone: <#= HomePhone #></li>" +
                                "</ul>");
                        })
                        .ToHtmlString()
            ))
    %>

Here is how the end result should look like (using the Hay skin):

Note
In this example we are using the Content(string value) methot because the TabStrip is defined in a client detail view template. If a client event of a nested UI is required - you should use the override which accepts string not Action. Right: ClientEvents(events => events.OnLoad("onLoad")) Wrong: ClientEvents(events => events.OnLoad(() => {%> alert('load'); <%})