Skip to content

Commit 084f5f0

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(mc-combo): virtualization article
1 parent 70e848a commit 084f5f0

File tree

1 file changed

+80
-85
lines changed

1 file changed

+80
-85
lines changed

‎components/multicolumncombobox/virtualization.md‎

Lines changed: 80 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,37 @@
11
---
22
title: Virtualization
3-
page_title: ComboBox - Virtualization
4-
description: UI virtualization to allow large data sources in the ComboBox for Blazor.
3+
page_title: MultiColumnComboBox - Virtualization
4+
description: UI virtualization to allow large data sources in the MultiColumnComboBox for Blazor.
55
slug: combobox-virtualization
66
tags: telerik,blazor,combo,combobox,virtualization
77
published: True
88
position: 30
99
---
1010

11-
# ComboBox Virtualization
11+
# MultiColumnComboBox Virtualization
1212

13-
The ComboBox @[template](/_contentTemplates/common/dropdowns-virtualization.md#value-proposition)
13+
The MultiColumnComboBox @[template](/_contentTemplates/common/dropdowns-virtualization.md#value-proposition)
1414

1515
#### In This Article
1616

1717
* [Basics](#basics)
1818
* [Local Data Example](#local-data-example)
1919
* [Remote Data Example](#remote-data-example)
2020

21-
>caption Display, scroll and filter over 10k records in the combobox without delays and performance issues
21+
## Basics
2222

23-
![Virtual Scrolling of large local data](images/combobox-virtual-scrolling-local.gif)
23+
This section will explain the parameters and behaviors that are related to the virtualization feature so you can set it up.
2424

25-
## Basics
25+
>caption To enable UI virtualization, you need to set the following parameters of the component:
2626
27-
@[template](/_contentTemplates/common/dropdowns-virtualization.md#basics-core)
27+
* `ScrollMode` - `Telerik.Blazor.DropDownScrollMode` - set it to `DropDownScrollMode.Virtual`. It defaults to the "regular" scrolling.
28+
* `ListHeight` - `string` - [set the height]({%slug common-features/dimensions%}) of the dropdown. It must **not** be a `null/empty` string.
29+
* `ItemHeight` - `decimal` - set it to the height each individual item will have in the dropdown. Make sure to accommodate the content your items will have and any item template.
30+
* `PageSize` - `int` - defines how many items will actually be rendered and reused. The value determines how many items are loaded on each scroll. The number of items must be large enough according to the `ItemHeight` and popup `ListHeight`, so that there are more items than the dropdown so there is a scrollbar.
2831

32+
You can find a basic example in the [Local Data](#local-data-example) section below.
33+
34+
>caption For working with [remote data](#remote-data-example), you also need:
2935
3036
* `ValueMapper` - `Func<TValue, Task<TItem>>` - @[template](/_contentTemplates/common/dropdowns-virtualization.md#value-mapper-text)
3137

@@ -40,20 +46,22 @@ The ComboBox @[template](/_contentTemplates/common/dropdowns-virtualization.md#v
4046
````CSHTML
4147
@SelectedValue
4248
<br />
43-
<TelerikComboBox Data="@Data"
44-
45-
ScrollMode="@DropDownScrollMode.Virtual"
46-
ItemHeight="30"
47-
PageSize="20"
48-
49-
TextField="@nameof(Person.Name)"
50-
ValueField="@nameof(Person.Id)"
51-
@bind-Value="@SelectedValue"
52-
Filterable="true" FilterOperator="@StringFilterOperator.Contains">
53-
<ComboBoxSettings>
54-
<ComboBoxPopupSettings Height="200px" />
55-
</ComboBoxSettings>
56-
</TelerikComboBox>
49+
<TelerikMultiColumnComboBox Data="@Data"
50+
TItem="Person"
51+
TValue="int"
52+
TextField="@nameof(Person.Id)"
53+
ValueField="@nameof(Person.Name)"
54+
Filterable="false"
55+
@bind-Value="@SelectedValue"
56+
ItemHeight="30"
57+
ListHeight="300px"
58+
PageSize="10"
59+
ScrollMode="@DropDownScrollMode.Virtual">
60+
<MultiColumnComboBoxColumns>
61+
<MultiColumnComboBoxColumn Field="@nameof(Person.Id)" Width="200px" />
62+
<MultiColumnComboBoxColumn Field="@nameof(Person.Name)" Width="200px" />
63+
</MultiColumnComboBoxColumns>
64+
</TelerikMultiColumnComboBox>
5765
5866
@code {
5967
int SelectedValue { get; set; }
@@ -86,83 +94,70 @@ Run this and see how you can display, scroll and filter over 10k records in the
8694
@using Telerik.DataSource
8795
@using Telerik.DataSource.Extensions
8896
89-
<p>@SelectedValue</p>
90-
91-
<TelerikComboBox TItem="@Person" TValue="@int"
92-
ScrollMode="@DropDownScrollMode.Virtual"
93-
OnRead="@GetRemoteData"
94-
ValueMapper="@GetModelFromValue"
95-
ItemHeight="30"
96-
PageSize="20"
97-
TextField="@nameof(Person.Name)"
98-
ValueField="@nameof(Person.Id)"
99-
@bind-Value="@SelectedValue"
100-
Filterable="true" FilterOperator="@StringFilterOperator.Contains">
101-
<ComboBoxSettings>
102-
<ComboBoxPopupSettings Height="200px" />
103-
</ComboBoxSettings>
104-
</TelerikComboBox>
105-
106-
@code{
107-
int SelectedValue { get; set; } = 1234; // pre-select an item to showcase the value mapper
108-
109-
async Task GetRemoteData(ComboBoxReadEventArgs args)
110-
{
111-
DataEnvelope<Person> result = await MyService.GetItems(args.Request);
97+
<TelerikMultiColumnComboBox TItem="Person"
98+
TValue="int"
99+
TextField="@TextField"
100+
ValueField="@ValueField"
101+
Filterable="false"
102+
@bind-Value="@SelectedValue"
103+
ItemHeight="@ItemHeight"
104+
ListHeight="@ListHeight"
105+
PageSize="@PageSize"
106+
ScrollMode="@DropDownScrollMode.Virtual"
107+
OnRead="@ReadItems"
108+
ValueMapper="@ConvertValue">
109+
<MultiColumnComboBoxColumns>
110+
<MultiColumnComboBoxColumn Field="@nameof(Person.EmployeeId)" Width="200px" />
111+
<MultiColumnComboBoxColumn Field="@nameof(Person.Name)" Width="200px" />
112+
</MultiColumnComboBoxColumns>
113+
</TelerikMultiColumnComboBox>
112114
113-
// set the Data and the TotalItems to the current page of data and total number of items
114-
args.Data = result.Data;
115-
args.Total = result.Total;
116-
}
115+
@code {
116+
public string TextField { get; set; } = "Name";
117+
public string ValueField { get; set; } = "EmployeeId";
118+
public string ListHeight { get; set; } = "260px";
119+
public int ItemHeight { get; set; } = 28;
120+
public int PageSize { get; set; } = 10;
121+
public int SelectedValue { get; set; } = 145;
122+
public string SelectedValueCustom { get; set; } = "Employee 145";
117123
118-
async Task<Person> GetModelFromValue(int selectedValue)
124+
public List<Person> AllData { get; set; }
125+
126+
protected Task<Person> ConvertValue(int selectedValue)
119127
{
120-
// return a model that matches the selected value so the component can get its text
121-
return await MyService.GetItemFromValue(selectedValue);
128+
return Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.EmployeeId));
122129
}
123130
124-
// mimics a real service in terms of API appearance, refactor as necessary for your app
125-
public static class MyService
131+
protected Task<Person> ConvertValueCustom(string selectedValue)
126132
{
127-
static List<Person> AllData { get; set; }
128-
129-
public static async Task<DataEnvelope<Person>> GetItems(DataSourceRequest request)
130-
{
131-
if (AllData == null)
132-
{
133-
AllData = Enumerable.Range(1, 12345).Select(x => new Person { Id = x, Name = $"Name {x}" }).ToList();
134-
}
135-
136-
await Task.Delay(400); // simulate real network and database delays. Remove in a real app
137-
138-
var result = await AllData.ToDataSourceResultAsync(request);
139-
DataEnvelope<Person> dataToReturn = new DataEnvelope<Person>
140-
{
141-
Data = result.Data.Cast<Person>().ToList(),
142-
Total = result.Total
143-
};
144-
145-
return await Task.FromResult(dataToReturn);
146-
}
133+
return Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.Name));
134+
}
147135
148-
public static async Task<Person> GetItemFromValue(int selectedValue)
149-
{
150-
await Task.Delay(400); // simulate real network and database delays. Remove in a real app
136+
protected async Task ReadItems(MultiColumnComboBoxReadEventArgs args)
137+
{
138+
await LoadData();
151139
152-
return await Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.Id));
153-
}
140+
var result = AllData.ToDataSourceResult(args.Request);
141+
args.Data = result.Data;
142+
args.Total = result.Total;
154143
}
155144
156-
// used to showcase how you could simplify the return of more than one value from the service
157-
public class DataEnvelope<T>
145+
// sample Read operation
146+
private async Task LoadData()
158147
{
159-
public int Total { get; set; }
160-
public List<T> Data { get; set; }
148+
if (AllData == null)
149+
{
150+
AllData = Enumerable.Range(0, 12345).Select(x => new Person
151+
{
152+
EmployeeId = x,
153+
Name = $"Name {x}"
154+
}).ToList();
155+
}
161156
}
162157
163158
public class Person
164159
{
165-
public int Id { get; set; }
160+
public int EmployeeId { get; set; }
166161
public string Name { get; set; }
167162
}
168163
}
@@ -171,6 +166,6 @@ Run this and see how you can display, scroll and filter over 10k records in the
171166

172167
## See Also
173168

174-
* [Live Demo: ComboBox Virtualization](https://demos.telerik.com/blazor-ui/combobox/virtualization)
169+
* [Live Demo: MultiColumnComboBox Virtualization](https://demos.telerik.com/blazor-ui/multicolumncombobox/virtualization)
175170

176171

0 commit comments

Comments
 (0)