列标题模板

绑定列字段的名称或其呈现标题在他们的头。通过HeaderTemplate,您可以定义自定义内容而不是标题文本。

@ *头模板覆盖内置的标题但离开排序指标和过滤器菜单图标* @ < TelerikTreeList数据=“@ Data”可分页= " true " IdField = " Id " ParentIdField =“ParentId”宽度= FilterMode = " @TreeListFilterMode 750 px。FilterMenu”可分类的= " true " > < TreeListColumns > < TreeListColumn字段=“Name”扩展= " true "宽度= " 320 px " > < HeaderTemplate > < div风格=“text-align:中心”> < / div >名称@ *这是块元素,它将推动排序指标,参见下面笔记* @和等级制度< / HeaderTemplate > < / TreeListColumn > < TreeListColumn字段= " Id "宽度=“300 px”> < HeaderTemplate > Id < br / > < TelerikButton OnClick = " @DoSomething " >做< / TelerikButton > < br / > @{如果(! string.IsNullOrEmpty(结果)){< span风格=“颜色:红色;其他> @result < / span >} {< div >单击按钮< / div >}} < / HeaderTemplate > < / TreeListColumn > < TreeListColumn > < HeaderTemplate > <跨类=“k-display-flex k-align-items-center”> < =“@FontIcon TelerikFontIcon图标。图像和图标" / > < / span > < / HeaderTemplate > < / TreeListColumn > < / TreeListColumns > < / TelerikTreeList > @code{公共列表<员工>数据{得到;设置;}保护覆盖异步任务OnInitializedAsync () {Data =等待GetTreeListData ();{}字符串结果得到;设置;= $}无效DoSomething(){结果”按钮点击{DateTime.Now}”;}/ /样本模型和数据生成公共类员工{公共int Id{得到;设置;}公共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); } }

头模板并不是可用的TreeListCheckboxColumn和TreeListCommandColumn。

如果你需要使用块元素头模板,请记住,他们将推动指标的预期位置。如果你不能避免块元素名称列中(如上图),添加一个CSS规则类似于下面的调整指标。

.k-treelist th。k-header .k-icon。k-i-sort-asc-sm .k-treelist th。k-header .k-icon。k-i-sort-desc-sm{:绝对;右:0;上图:8 px;}/ *和* / .k-treelist-header .k-header > .k-link {padding-right: 1.5 em;}.k-treelist-header .k-header > .k-link > .k-icon{:绝对;上图:50%;右:0.5 em; transform: translateY(-50%); margin-left: 0; } .k-treelist-header .k-sort-order { position: absolute; right: 0.25em; }

另请参阅

• 现场演示:TreeList模板