多选事件

这篇文章解释了在Telerik MultiSelect Blazor中可用的事件:

• ValueChanged
• OnChange
• OnRead
• OnOpen
• OnClose
• OnItemRender
• 元素失去焦点时

ValueChanged

的ValueChanged事件在用户选择更改(用户添加或删除项)时触发。lambda表达式中参数的类型必须与价值组件类型。

如果AdaptiveRendering在中小型设备上启用ValueChanged仅当用户单击操作表中的确认按钮时才会触发。

所选项目计数:@(MultiValues?。数? ?0) 
   @code{private List MultiData {get;设置;} = new List{"经理"，"开发人员"，"QA"， "技术写手"，"支持工程师"};private List MultiValues {get;设置;} = new List() {"Developer"};OnMultiValueChanged(List newValues) {MultiValues = newValues;}}

这个事件是EventCallback它可以是同步的(返回无效)，或者它也可以是异步的并返回异步任务．

处理程序中的lambda表达式是框架所需要的:https://github.com/aspnet/AspNetCore/issues/12226．

OnChange

的OnChange事件表示用户操作—确认当前值/项。主要的区别是ValueChanged是:

• OnChange不阻止双向绑定(@bind-Value语法)
• OnChange当用户按下时触发输入在输入中，或模糊输入(例如，单击输入外或下拉菜单)。

OnChange从下拉列表中选择项时触发，从所选列表中删除项，或从所选列表中删除所有项，就像ValueChanged．

@result 
  
 from the model: 
 @foreach (var item in TheValues) {
@item
} 
 @code{string result {get;设置;} void MyOnChangeHandler(对象theUserChoice) {List theData = theUserChoice as List;result = $"现在有{theData。计数}项选择";} List TheValues {get;设置;} = new List();List Roles {get;设置;} = new List{"经理"，"开发人员"，"QA"， "技术写手"，"支持工程师"，"销售代理"，"架构师"，"设计师"}; }

OnRead

你可以用他OnRead事件根据一些自定义逻辑和当前用户输入和/或滚动位置向组件提供数据虚拟化)．事件在以下情况下触发:

• 组件初始化
• 用户过滤器
• 用户使用虚拟化启用

您还可以通过异步操作调用远程数据。

@*此示例模拟基于用户输入的抓取选项*@  
选择值:
 
 @foreach (var item in TheValues) {
@item
} 
 @code{List TheValues {get;设置;} = new List();async Task ReadItems(MultiSelectReadEventArgs args) {if (args. request . filters . filter . async Task ReadItems(MultiSelectReadEventArgs args)Count > 0) //等待用户输入加载数据{telerike . datasource . filterdescriptor filter = args.Request. filter = args.Request. filter = args.Request. filter = args.Request. filter = args.Request。将[0]过滤为Telerik.DataSource.FilterDescriptor;string userInput = filter.Value.ToString();string方法= filter.Operator.ToString();//新的数据收集来自于服务参数。Data = await getadvistionsdata (userInput, method);}} async Task> getadvistionsdata (string userInput, string filterOperator) {await Task. delay (500); // simulate network delay, remove it for a real app //sample logic for getting options - here they are generated, you can call a remote service //for brevity, this example does not use the filter operator, but your actual service can List optionssData = new List(); for (int i = 1; i <= 5; i++) { optionssData.Add($"suggestion {i} for input {userInput}"); } return optionssData; } }

@using telerikdatasource . extensions  
Selected values
 
 @foreach (var item in TheValues) {
@item
} 
 @code {List TheValues {get;设置;} = new List();List AllOptions {get;设置;} List CurrentOptions {get;设置;} = new List(); async Task ReadItems(MultiSelectReadEventArgs args) { //using Telerik extension methods to filter the data var datasourceResult = AllOptions.ToDataSourceResult(args.Request); args.Data = datasourceResult.Data; } protected override void OnInitialized() { AllOptions = new List() { new Car { Id = 1, Make = "Honda" }, new Car { Id = 2, Make = "Opel" }, new Car { Id = 3, Make = "Audi" }, new Car { Id = 4, Make = "Lancia" }, new Car { Id = 5, Make = "BMW" }, new Car { Id = 6, Make = "Mercedes" }, new Car { Id = 7, Make = "Tesla" }, new Car { Id = 8, Make = "Vw" }, new Car { Id = 9, Make = "Alpha Romeo" }, new Car { Id = 10, Make = "Chevrolet" }, new Car { Id = 11, Make = "Ford" }, new Car { Id = 12, Make = "Cadillac" }, new Car { Id = 13, Make = "Dodge" }, new Car { Id = 14, Make = "Jeep" }, new Car { Id = 15, Make = "Chrysler" }, new Car { Id = 16, Make = "Lincoln" } }; base.OnInitialized(); } public class Car { public int Id { get; set; } public string Make { get; set; } } }

OnOpen

的OnOpen事件在MultiSelect弹出窗口渲染之前触发。

事件处理程序接收一个参数MultiSelectOpenEventArgs对象，该对象包含:

  @code {private List MultiSelectValue {get;设置;} = new();private void OnMultiSelectPopupOpen(MultiSelectOpenEventArgs){//设置IsCancelled为true取消OnOpen事件参数。IsCancelled = false;} private List Items {get;设置;} =可枚举的。范围(50)。Select(x => new ItemDescriptor() {ItemId = x, ItemText = $"Item {x}"}).ToList(); public class ItemDescriptor { public int ItemId { get; set; } public string ItemText { get; set; } } }

OnClose

的OnClose事件在多重选择弹出窗口关闭之前触发。

事件处理程序接收一个参数MultiSelectCloseEventArgs对象，该对象包含:

@*取消基于条件的OnClose事件*@   @code {private List MultiSelectValue {get;设置;} = new();private void OnMultiSelectPopupClose(MultiSelectCloseEventArgs args){//根据条件取消OnClose事件任意(x => x == 2)){参数。IsCancelled = true;}} private List Items {get;设置;} =可枚举的。范围(50)。Select(x => new ItemDescriptor() {ItemId = x, ItemText = $"Item {x}"}).ToList(); public class ItemDescriptor { public int ItemId { get; set; } public string ItemText { get; set; } } }

OnItemRender

的OnItemRender当“多选”下拉菜单中的每个项呈现时触发事件。

事件处理程序接收一个参数MultiSelectItemRenderEventArgs < TItem >对象，该对象包含:

@*在MultiSelect中自定义一个项目*@   @code {private List MultiSelectValues {get;设置;} private void OnItemRenderHandler(MultiSelectItemRenderEventArgs args) {OptionsModel currentItem = args. item;如果(currentItem。StringRepresentation == "third" && currentItem。UniqueIdentifier == 3) {args.Class = "custom -item";}} private List Options {get; set; } = new List { new OptionsModel { StringRepresentation = "first", UniqueIdentifier = 1 }, new OptionsModel { StringRepresentation = "second", UniqueIdentifier = 2 }, new OptionsModel { StringRepresentation = "third", UniqueIdentifier = 3 } }; public class OptionsModel { public string StringRepresentation { get; set; } public int UniqueIdentifier { get; set; } } }

元素失去焦点时

的元素失去焦点时事件在组件失去焦点时触发。

@*您不必使用OnChange来对焦点丢失做出反应*@   @code{async Task OnBlurHandler(){控制台。WriteLine($"BLUR触发，当前选择计数为{TheValues.Count}.");} List TheValues {get;设置;} = new List();列表选项{获取;设置;} = new List {"one"， "two"， "three"};｝

另请参阅

• ValueChanged和Validation
• 只触发一次OnChange