Blazor MultiColumnComboBox概述

的Blazor MultiColumnComboBox控件中选择一个选项预定义的选项集在下拉式网格布局中。用户还可以过滤器或集团可用的项目，或进入自定义值．

multiolumncombobox组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建MultiColumnComboBox

1. 使用< TelerikMultiColumnComboBox >标签。
2. 填充数据参数与您希望在下拉列表中显示的集合。
3. 设置文本框而且ValueField参数指向模型的相应属性名。
4. 绑定组件价值类中的一个相同类型的变量ValueField．
5. 添加MultiColumnComboBoxColumn在MultiColumnComboBoxColumns标签。的场每列的参数必须指向模型中的一个属性。

    
所选产品Id: @SelectedProduct
 @code {private List< product > MultiComboData {get;设置;} private int SelectedProduct {get;设置;} protected override void OnInitialized() {var rnd = new Random();MultiComboData =可枚举的。范围(30)。Select(x => new Product() { Id = x, Name = $"Product {x}", Quantity = rnd.Next(0, 30) }).ToList(); base.OnInitialized(); } public class Product { public int Id { get; set; } public string Name { get; set; } public int Quantity { get; set; } } }

数据绑定

Blazor MultiColumnComboBox需要一个数据源，以便它可以用数据填充下拉列表。要提供数据源，请使用数据财产。阅读更多关于Blazor MultiColumnComboBox数据绑定…．

链接的文章还解释了当当前值不存在于数据中时组件的行为。

列

MultiColumnComboBox以类似网格的列布局呈现其下拉项。了解如何定义和配置Blazor multiolumncombobox列…

过滤

MultiColumnComboBox有一个内置过滤器，可以根据最终用户类型缩小所显示建议的范围。要配置此特性，请使用滤过性的参数。此外，您还可以选择不同的筛选操作符，并在包含建议的列表将出现多少符号之后配置。阅读更多关于Blazor MultiComboBoxComboBox过滤…．

分组

MultiColumnComboBox允许您将列出的建议分组到类别中，以便您可以帮助最终用户更快地浏览较长的列表。阅读更多关于Blazor MultiColumnComboBox分组…．

模板

您可以使用内置模板的功能并自定义组件的默认呈现。阅读更多关于Blazor MultiColumnComboBox模板…．

验证

通过使用内置验证，可以确保组件值是可接受的。阅读更多关于输入验证的信息…．

虚拟化

通过虚拟化下拉列表中的元素，您可以使用巨大的数据源，而不会出现性能问题。UI虚拟化同时适用于本地和远程数据。阅读更多关于Blazor MultiColumnComboBox虚拟化…

自适应呈现

该组件根据屏幕大小支持不同的弹出式呈现。阅读更多关于自适应渲染功能以及如何启用它…

MultiColumnComboBox参数

造型和外观

以下参数使您能够自定义Blazor多列组合框的外观:

控件中，可以找到自定义多列组合框样式的更多选项外观的文章．

弹出设置

组件的弹出窗口可以通过嵌套标签进行额外定制:

     .

multiolumncombobox提供了以下弹出设置:

组件引用和方法

要执行MultiColumnComboBox方法，请通过获取组件实例的引用@ref．

MultiColumnComboBox是一个通用组件。它的类型取决于它的模型的类型和对象的类型价值．如果你不能提供价值或数据最初，你需要将相应的类型设置为TItem而且TValue参数．

下表列出了MultiComboBox方法。亦请参阅MultiColumnComboBox API．

打开multiolumncombobox      @code {private TelerikMultiColumnComboBox MultiColumnComboRef {get;设置;} private List Products {get;设置;} private int SelectedProduct {get;设置; } private void Open() { MultiColumnComboRef.Open(); } protected override void OnInitialized() { var rnd = new Random(); Products = Enumerable.Range(1, 30).Select(x => new Product() { Id = x, Name = $"Product {x}", Quantity = rnd.Next(0, 30) }).ToList(); base.OnInitialized(); } public class Product { public int Id { get; set; } public string Name { get; set; } public int Quantity { get; set; } } }

下一个步骤

• 将MultiColumnComboBox绑定到数据
• 启用MultiColumnComboBox过滤
• 允许自定义MultiColumnComboBox值

另请参阅

• 现场演示:MultiColumnComboBox
• 现场演示:多列组合框验证