MultiColumnComboBox虚拟化

MultiColumnComboBox组件可以虚拟化其下拉菜单中的元素，因此您可以使用大型数据源，而不会出现UI性能问题。

启用UI虚拟化特性可以使组件在滚动时重用下拉列表中的一组项，而不是呈现整个数据源。它既可以处理视图模型已经拥有的本地数据，也可以在用户每次滚动组件提供的事件时获取远程数据。

本文简介

• 基础知识
• 本地数据示例
• 远程数据示例

基础知识

本节将解释与虚拟化特性相关的参数和行为，以便您进行设置。

• ScrollMode-Telerik.Blazor.DropDownScrollMode-设置为DropDownScrollMode。虚拟。它默认为“常规”滚动。
• ListHeight-字符串-设置高度下拉列表。它必须不是一个空/空字符串。
• ItemHeight-小数-设置它的高度，每个单独的项目将在下拉菜单中。确保您的项目将有内容和任何项目模板。
• 页大小-int-定义实际渲染和重用的物品数量。该值决定在每个滚动中加载多少项。项目数量必须足够大，根据ItemHeight并弹出ListHeight，这样项目就比下拉菜单项多，这样就有了一个滚动条。

你可以找到一个基本的例子本地数据下面的部分。

• ValueMapper-Func < TValue、任务< TItem > >组件将调用此方法来请求匹配的模型价值它已经凝固了。这是必需的，因为对于远程数据价值可能不在组件所拥有的初始数据集合中，否则就没有办法提取DataTextField从它来渲染它。通常，在初始呈现时调用此方法仅用于获取当前选择的数据项。

• OnRead-EventCallback当用户滚动到相应的偏移量(跳过)，页大小以及任何过滤器。这使您可以优化数据查询，并在需要时只返回当前需要的内容。设置arg游戏。数据而且arg游戏。总计事件参数对象的属性。

限制

• 当最初选择的项/项在与第一个不同的页面上时，打开下拉列表将不会滚动到所选的项。

本地数据示例

@SelectedValue 
       @code {int SelectedValue {get;设置;} List Data {get;设置;OnInitialized(){数据=可枚举的。范围(12345)。Select(x => new Person {Id = x, Name = $"Name {x}"}).ToList(); base.OnInitialized(); } public class Person { public int Id { get; set; } public string Name { get; set; } } }

远程数据示例

这个例子展示了以下的示例实现:

• 返回数据的异步远程服务。它是由本例的静态类模拟的，您可以根据需要进行重构，并且可以在中找到通过连线序列化它的示例这个示例项目的集合对于网格组件，方法是相同的。

• 一个OnRead调用该服务的事件处理程序。

• 一个ValueMapper这也调用了服务。

运行这个程序，看看如何在组合框中显示、滚动和过滤超过10k条记录，而不会出现来自远程端点的延迟和性能问题。为了演示，这些行动被人为地推迟了。

@using Telerik。数据Source @using Telerik.DataSource.Extensions       @code { public string TextField { get; set; } = "Name"; public string ValueField { get; set; } = "EmployeeId"; public string ListHeight { get; set; } = "260px"; public int ItemHeight { get; set; } = 28; public int PageSize { get; set; } = 10; public int SelectedValue { get; set; } = 145; public string SelectedValueCustom { get; set; } = "Employee 145"; public List AllData { get; set; } protected Task ConvertValue(int selectedValue) { return Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.EmployeeId)); } protected Task ConvertValueCustom(string selectedValue) { return Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.Name)); } protected async Task ReadItems(MultiColumnComboBoxReadEventArgs args) { await LoadData(); var result = AllData.ToDataSourceResult(args.Request); args.Data = result.Data; args.Total = result.Total; } // sample Read operation private async Task LoadData() { if (AllData == null) { AllData = Enumerable.Range(0, 12345).Select(x => new Person { EmployeeId = x, Name = $"Name {x}" }).ToList(); } } public class Person { public int EmployeeId { get; set; } public string Name { get; set; } } }

另请参阅

• 现场演示:多列组合框虚拟化