gpt4 book ai didi

asp.net-mvc-4 - 如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构

转载 作者:行者123 更新时间:2023-12-01 19:25:01 25 4
gpt4 key购买 nike

我正在尝试使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构我可以实现特定数量的嵌套网格,但如何在asp.net MVC中使用特定数据实现N级嵌套网格

@(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:430px;" })
.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#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(70);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.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>

使用此代码我可以获得 1 个嵌套网格。

请指导如何获得 N 级 Kendo 嵌套网格。谢谢

最佳答案

您可以使用 Kendo UI 网格实现 N 级层次结构。

您的模板中应该有 ClientDetailTemplateId。这是一个例子。

<script id="clientTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<TimeSheetManagement.Models.ClientView>()
.Name( "ClientGrid_#=Id#" )
.Columns( columns =>
{
columns.Bound( e => e.Name ).Title("Client Name");
columns.Bound( e => e.Address ).Title( "Client Address" );
columns.Bound( e => e.City ).Title( "Client City" );
columns.Bound( e => e.State );
columns.Bound( e => e.ZipCode );
columns.Bound( e => e.CreatedDate );
columns.Bound( e => e.CreatedBy );
columns.Bound( e => e.UpdatedDate );
columns.Bound( e => e.UpdatedBy );
//columns.Bound( "" ).ClientTemplate( @Html.ActionLink( "Edit" , "Create" , new { clientId = "#=Id#" } , new { title = "Edit Client" } ).ToHtmlString() );
} )
.AutoBind( true )
.DataSource( dataSource => dataSource
.Ajax()
.Read( read => read.Action( "GetClientsByProjectId" , "Client" , new { sProjectId = "#=Id#" } ) )
)
.ClientDetailTemplateId( "employeeTemplate" )
.ToClientTemplate()
)
</script>

这是子模板的实现。

<script id="employeeTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<TimeSheetManagement.Models.EmployeeView>()
.Name( "EmployeeGrid_#=Id#" )
.Columns( columns =>
{
columns.Bound( e => e.EmployeeName );
columns.Bound( e => e.Address );
columns.Bound( e => e.City );
columns.Bound( e => e.State );
columns.Bound( e => e.ZipCode );
columns.Bound( e => e.PhoneNumber );
columns.Bound( e => e.Email );
columns.Bound( e => e.Designation );
columns.Bound( e => e.CreatedDate );
columns.Bound( e => e.CreatedBy );
} )
.AutoBind( true )
.DataSource( dataSource => dataSource
.Ajax()
.Read( read => read.Action( "GetEmployeesByClientId" , "Employee" , new { sClientId = "#=Id#" } ) )
)
.ToClientTemplate()
)
</script>

这是输出。如果您还有其他问题,请告诉我。我希望这会对您有所帮助。
enter image description here

关于asp.net-mvc-4 - 如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23863581/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com