Kendo UI 2013 Grid реализовать parent-child (expand-collapse)

Question

Я новичок в kendo ui и mvc.

Кто-нибудь знает, как реализовать результат родительского-потомка в сетке Кендо с расширением/сбойным поведением?

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

Вот пример простой сетки (родитель-ребенок еще не работает) $ (функция() {

 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>