Question

我是kendo ui和mvc的新手。

是否有人知道如何使用展开/折叠行为在Kendo网格中实现父子结果？

Answer 1

您可以找到示例here。

基本上，您的主网格需要使用ClientDetailTemplateId()指向网格模板。然后，您将创建一个将成为您的子网格的模板。

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName).Width(110);
            columns.Bound(e => e.LastName).Width(110);
            columns.Bound(e => e.Country).Width(110);
            columns.Bound(e => e.City).Width(110);
            columns.Bound(e => e.Title);

        })               
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))            
        )        
        .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(110);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.ShipName).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

Answer 2

以下是示例简单网格（父子项尚未运行） $（function（）{

        var employee = [
            { empID: 1, lastName: "Sarsonas", firstName: "Christine", ReportingTo: 0, Subordinate: {} },
            { empID: 2, lastName: "Sarsonas", firstName: "Alyssa", ReportingTo: 0, Subordinate: {} },
            { empID: 3, lastName: "Sarsonas", firstName: "Avril", ReportingTo: 0, Subordinate: {} },
            {
                empID: 10, lastName: "Uchiha", firstName: "Sasuke", ReportingTo: 1,
                Subordinate: { empID: 100, lastName: "Uzumaki", firstName: "Naruto", ReportingTo: 10 }
            }
        ];


        $("#TestGrid").kendoGrid({
            columns: [
                { title: "EmpID", field: "empID" },
                { title: "LastName", field: "lastName"},
                { title: "FirstName", field: "firstName" },
                { title: "ReportingTo", field: "ReportingTo" }
            ],
            dataSource: {
                data: employee
            }
    });
});
</script>

Kendo UI 2013 Grid实现父子（expand-collapse）

2 个答案: