Blazor MultiColumnComboBox概述
的Blazor MultiColumnComboBox控件中选择一个选项预定义的选项集在下拉式网格布局中。用户还可以过滤器或集团可用的项目,或进入自定义值.
multiolumncombobox组件是Blazor的Telerik UI,一个专业级的UI库,包含100多个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
创建MultiColumnComboBox
- 使用
< TelerikMultiColumnComboBox >
标签。 - 填充
数据
参数与您希望在下拉列表中显示的集合。 - 设置
文本框
而且ValueField
参数指向模型的相应属性名。 - 绑定组件
价值
类中的一个相同类型的变量ValueField
. - 添加
MultiColumnComboBoxColumn
在MultiColumnComboBoxColumns
标签。的场
每列的参数必须指向模型中的一个属性。
带有双向值绑定的多olumncombobox数据绑定
所选产品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参数
MultiColumnComboBox提供了各种参数,允许您配置组件:
参数 | 类型及默认值 | 描述 |
---|---|---|
AdaptiveMode |
AdaptiveMode ( 没有一个 ) |
的自适应模式组件的。 |
AllowCustom |
保龄球 |
确定用户是否可以进入自定义值.如果启用,则ValueField 一定是字符串 . |
ClearButton |
保龄球 |
在输入中显示一个清除按钮。单击时,价值 将更改为默认(TValue) ,所以必须没有项目数据 有这样一个价值 .例如,如果TValue 是int ,应该没有数据项0 在其ValueField ,否则可能会出现选择问题。 |
数据 |
IEnumerable < TItem > |
组件数据。 |
DebounceDelay |
int ( 150 ) |
最后输入的符号与内部符号之间的时间(以毫秒为单位)oninput 事件触发。当用户输入和筛选时应用。使用它来平衡客户端性能和数据库查询数量。 |
启用 |
保龄球 |
用户是否可以与组件交互。 |
滤过性的 |
保龄球 |
使过滤对于最终用户。 |
FilterOperator |
StringFilterOperator 枚举( StartsWith ) |
的过滤方法. |
Id |
字符串 |
的id 属性。 元素。用它来附加一个<标签= "……" > 对输入。 |
占位符 |
字符串 |
当没有选择项目时,用户看到的提示文本。时将显示占位符价值 的默认值ValueField 类型。例如,0 为int ,零 为int ? 或字符串 . |
TItem |
类型 |
模型的类型。如果你不能提供数据 或价值 .确定引用对象的类型。 |
TValue |
类型 |
的类型ValueField 从模型中。如果你不能提供数据 或价值 .确定引用对象的类型。值的类型可以是:- 数量 (int ,双 等)。- 字符串 - Guid - 枚举 |
标题 |
字符串 |
在弹出窗口(动作表)头部呈现的标题文本。仅适用于以下情况AdaptiveMode 设置为汽车 . |
文本框 |
字符串 ( 文本 ) |
将显示给用户的模型属性的名称。 |
ValueField |
字符串 ( 价值 ) |
将作为底层组件的模型属性的名称价值 . |
价值 |
TValue |
组件的值。使用@bind-Value 双向绑定的语法。 |
TabIndex |
int ? |
的tabindex 属性。 元素。使用它来自定义页面上的选项卡(焦点)顺序。 |
造型和外观
以下参数使您能够自定义Blazor多列组合框的外观:
参数 | 类型 | 描述 |
---|---|---|
类 |
字符串 |
将在组件的主包装元素上呈现的CSS类。用它来重写主题或应用自定义样式. |
宽度 |
字符串 |
组件的宽度。如果下拉菜单没有设置特定的宽度,它将同时瞄准下拉菜单和主元素。默认的宽度 值为空,但主题适用100% .使用宽度 属性或自定义CSS来设置另一个值在任何支持的单位中. |
控件中,可以找到自定义多列组合框样式的更多选项外观的文章.
弹出设置
组件的弹出窗口可以通过嵌套标签进行额外定制:
.
multiolumncombobox提供了以下弹出设置:
参数 | 类型 | 描述 |
---|---|---|
AnimationDuration |
int |
弹出窗口的动画持续时间,以毫秒为单位。 |
类 |
字符串 |
附加的CSS类来自定义弹出框的外观。 |
MinWidth |
字符串 |
弹出窗口的最小宽度。 |
MaxWidth |
字符串 |
弹出窗口的最大宽度。 |
宽度 |
字符串 |
弹出窗口的宽度。如果你不指定一个值,下拉框宽度将匹配锚元素宽度,这有助于响应式布局和100%宽度。 |
组件引用和方法
要执行MultiColumnComboBox方法,请通过获取组件实例的引用@ref
.
MultiColumnComboBox是一个通用组件。它的类型取决于它的模型的类型和对象的类型价值
.如果你不能提供价值
或数据
最初,你需要将相应的类型设置为TItem
而且TValue
参数.
下表列出了MultiComboBox方法。亦请参阅MultiColumnComboBox API.
方法 | 描述 |
---|---|
关闭 |
关闭组件下拉菜单。 |
FocusAsync |
聚焦组件文本框。 |
开放 |
打开组件下拉菜单。 |
重新绑定 |
刷新组件数据. |
使用MultiColumnComboBox方法
打开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; } } }