网格层次结构

Grid组件通过详细模板以分层方式显示数据，提供了用于可视化父记录和子记录之间关系的选项。

在本文中:

• 基础知识
• 从代码中展开行
• 更多的例子

基础知识

要在Grid中实现层次结构，可以定义DetailTemplate在网格的主标签下。在此模板中，您可以通过上下文，并使用其他组件显示其中的详细数据(例如，另一个网格，或任何其他组件和HTML集)。

定义详细信息模板时，在用户可以单击以显示和隐藏详细信息数据的行开头呈现展开/折叠按钮。

单击+图标展开行详细信息  @{var employee = context as MainModel;< TelerikGrid数据= "员工。订单" Pageable="true" PageSize="5">     }     @code {List salesTeamMembers {get;设置;} protected override void OnInitialized() {salesTeamMembers = GenerateData();} private List GenerateData() {List data = new List();For (int I = 0;I < 5;i++) {MainModel mdl = new MainModel {Id = i, Name = $"Name {i}"};mdl。Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x^i }).ToList(); data.Add(mdl); } return data; } public class MainModel { public int Id { get; set; } public string Name { get;set; } public List Orders { get; set; } } public class DetailsModel { public int OrderId { get; set; } public double DealSize { get; set; } } }

要有更多的层次，只需嵌套更多的网格并命名上下文变量。你可以在多级层次结构KB文章。

从代码中展开行

您可以选择哪些细节模板将从您的代码扩展到网格状态．它的ExpandedItems字段包含一个展开网格项的集合(默认情况下所有细节模板都是折叠的)。

的ExpandedItems集合将与Grid Data集合进行比较，以确定将展开哪些行。框架的默认行为是根据对象的引用比较对象。

当ExpandedItems从网格的不同数据源获得(例如，从单独的服务方法而不是从视图模型)，引用可能不匹配，因此将没有展开项。在这种情况下，必须重写=方法，以便它匹配它们，例如，通过唯一标识符而不是通过引用，以便两个对象可以相等，而不管它们的起源，而是根据它们的内容。当你重写=方法时，也建议重写GetHashCode方法方法也是。中提供了类似的示例从浏览器LocalStorage保存和加载网格状态的例子。

如果要为网格设置初始状态，请使用类似的代码段，但是在OnStateInit事件

@using Telerik.DataSource;从代码展开层次结构   @{var employee = context as MainModel;< TelerikGrid数据= "员工。订单" Pageable="true" PageSize="5">     }       @code {public TelerikGrid Grid {get;设置;} async Task ExpandHierarchy() {GridState desiredState = new GridState(){//扩展前两行ExpandedItems = new List {salesTeamMembers[0]， salesTeamMembers[1]}};等待Grid.SetState (desiredState);} List salesTeamMembers {get;设置;} protected override void OnInitialized() {salesTeamMembers = GenerateData(); } private List GenerateData() { List data = new List(); for (int i = 0; i < 5; i++) { MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" }; mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList(); data.Add(mdl); } return data; } public class MainModel { public int Id { get; set; } public string Name { get; set; } public List Orders { get; set; } } public class DetailsModel { public int OrderId { get; set; } public double DealSize { get; set; } } }

更多的例子

下面的文章和示例项目在实现层次结构时可能会有所帮助:

• 层级编辑

• 按需加载分层数据

• 多级层次结构

• 对齐嵌套网格中的列

• 自定义Excel导出，包括层次结构

另请参阅

• 现场演示:网格层次结构