Blazor的Telerik UI?下载30天免费试用

行模板

行的模板允许您在自己的代码中定义< tr >元素,树列表将为每条记录呈现。控件的内容< RowTemplate >树列表的内部标记。

如果您想为大部分或所有列使用模板,这可能会很方便,因为它需要的标记比为许多列设置单个模板要少。

行模板的内容必须为< td >元素及其数量(或总数)colspan)必须匹配树列表中定义的列数。

您可以使用上下文属性。< RowTemplate >标记来设置上下文变量的名称。它的类型是树列表绑定到的模型类型。

使用行模板剥夺了树列表的功能,因为它不再控制自己的呈现。例如,编辑不能呈现编辑器,展开-折叠箭头将不可用,列大小调整和重新排序不能再改变数据单元格,只有标题和行选择必须由应用程序实现。

使用行模板

用你自己的代码和逻辑渲染整行         @employee。Id - @employee。名称  @{var manager =数据。(d => d. id . equals (employee.ParentId));"Manager: " @(Manager == null ?"none": manager.Name)}    @code {public List Data {get;设置;} protected override async任务OnInitializedAsync(){数据=等待GetTreeListData();} //样本模型和数据生成的公共类Employee{公共int Id {get;设置;}公共int? ParentId { get; set; } public string Name { get; set; } } async Task> GetTreeListData() { List data = new List(); for (int i = 1; i < 15; i++) { data.Add(new Employee { Id = i, ParentId = null, Name = $"root: {i}" }); for (int j = 1; j < 5; j++) { int currId = i * 100 + j; data.Add(new Employee { Id = currId, ParentId = i, Name = $"first level child {j} of {i}" }); for (int k = 1; k < 5; k++) { data.Add(new Employee { Id = currId * 1000 + k, ParentId = currId, Name = $"second level child {k} of {i} and {currId}" }); ; } } } return await Task.FromResult(data); } }

上面代码片段的结果-树列表看起来像一个网格,并没有显示记录层次结构

Blazor行模板

另请参阅

在本文中
Baidu
map