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

MultiColumnComboBox模板

MultiColumnComboBox组件允许您通过模板更改其页眉和页脚中呈现的内容。

在本文中:

RowTemplate允许您在下拉菜单中控制每一行的呈现。如果是分开的,请使用行模板柱模板不允许足够的定制。

您可以访问上下文对象,并将其转换为绑定模型以使用一些自定义业务逻辑。的contenxt表示该行的当前数据项。

multiolumncombobox项呈现为列表(< ul >),而非<表>。只有在为每个项呈现完整的表时,才可以在行模板中使用表单元格。类中使用两个兄弟容器来模拟默认组件外观< RowTemplate >与一个k-table-tdCSS类。

头模板

HeaderTemplate控制可放在下拉元素中项列表上方的内容。当组合框展开时,它总是可见的。默认为空。

FooterTemplate允许您呈现下拉列表元素中项目列表下面的内容。当下拉菜单展开时,它总是可见的。默认为空。

无数据模板

NoDataTemplate当组件没有任何项时,控制弹出式元素的内容。默认情况下,只呈现“No data”文本。

例子

使用多列组合框模板

@* multiolumncombobox组件与RowTemplate, HeaderTemplate, ItemTemplate, FooterTemplate和NoDataTemplate *@ 

multiolumncombobox有数据

从以下选项中选择一个:
@row. "Name
< >强@row。Quantity
合计项:@MultiComboData.Count()

No items available

@code {private int SelectedProduct {get;设置;} private bool IsDataAvailable {get; set; } = true; private List MultiComboData { get; set; } private List SourceData { get; set; } protected override void OnInitialized() { var rnd = new Random(); SourceData = Enumerable.Range(1, 30).Select(x => new Product() { Id = x, Name = $"Product {x}", Quantity = rnd.Next(0, 30) }).ToList(); MultiComboData = new List(SourceData); base.OnInitialized(); } private void OnCheckBoxChangeHandler() { if (IsDataAvailable) { MultiComboData = new List(SourceData); } else { MultiComboData = new List(); } } public class Product { public int Id { get; set; } public string Name { get; set; } public int Quantity { get; set; } } }

另请参阅

在本文中
Baidu
map