Add new kb article combobox-virtualization-loader #3123
Conversation
georgedautov
force-pushed
the
combobox-loader-kb-example
branch
from
cf23fe7 to
f1d3623
Compare
| page_title: Adding Loader to ComboBox During Remote Data Fetch and Virtualization | ||
| slug: adding-loader-combobox-remote-data-virtualization | ||
| position: | ||
| tags: combobox, ui-for-blazor, templates, nodatatemplate, header-template, loader |
There was a problem hiding this comment.
| tags: combobox, ui-for-blazor, templates, nodatatemplate, header-template, loader | |
| tags: blazor, combobox, loader, templates, nodatatemplate, headertemplate |
| @@ -0,0 +1,159 @@ | |||
| --- | |||
| title: Displaying Loading Indicator in ComboBox with Remote Data and Virtualization | |||
There was a problem hiding this comment.
People are more likely to google without -ing.
| title: Displaying Loading Indicator in ComboBox with Remote Data and Virtualization | |
| title: Display Loading Indicator in ComboBox with Remote Data and Virtualization |
| description: Learn how to add a loading indicator in the TelerikComboBox component when using remote data and virtualization functionality in UI for Blazor. | ||
| type: how-to | ||
| page_title: Adding Loader to ComboBox During Remote Data Fetch and Virtualization | ||
| slug: adding-loader-combobox-remote-data-virtualization |
There was a problem hiding this comment.
The naming convention is:
componentname-kb-foo-bar
Usually, the .md file name is the same, but without the -kb part
| ### Key Points | ||
| - Use the `HeaderTemplate` for displaying a loading indicator during scrolling or filtering. | ||
| - Call the `Refresh` method on the ComboBox reference to update the UI dynamically during data load operations. | ||
| - Toggle visibility of old items using CSS to enhance user experience. |
There was a problem hiding this comment.
These should be merged with the solution above.
| ### 1. Display a Loading Indicator During Remote Data Fetch | ||
| Use the `HeaderTemplate` property of the ComboBox component to show a loading indicator. Add a boolean flag to track the loading state and update it dynamically during data fetch operations. Use a CSS rule to disable the default "No Data" message. | ||
|
|
||
| ### 2. Clear Old Items During Filtering/Search | ||
| Modify the visibility of old items using CSS rules and conditionally toggle their appearance based on the loading state. |
There was a problem hiding this comment.
We use a numbered list for the steps:
https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-search-button-click
Headings are acceptable if you want to show two alternative ways to achieve the same result, with two separate examples:
https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-get-filtered-data#solution
| ### Implementation | ||
|
|
||
| Below is an example implementation that solves both issues: |
There was a problem hiding this comment.
Given the above comment, this part is probably unnecessary. Add a caption> before the example though.
| // used to showcase how you could simplify the return of more than one value from the service | ||
| public class DataEnvelope<T> | ||
| { | ||
| public int Total { get; set; } | ||
| public List<T> Data { get; set; } | ||
| } | ||
|
|
There was a problem hiding this comment.
This part adds an unnecessary and irrelevant complication. Use a simpler example without it.
https://www.telerik.com/blazor-ui/documentation/components/multicolumncombobox/virtualization#remote-data-example
|
|
||
| public static async Task<DataEnvelope<Person>> GetItems(DataSourceRequest request) | ||
| { | ||
| await Task.Delay(3000); |
There was a problem hiding this comment.
This delay is too long and the example UX is bad. For example, the ComboBox remains empty for some time, even though it's evident that it has a Value.
| await Task.Delay(3000); | |
| await Task.Delay(500); |
| public static async Task<Person> GetItemFromValue(int selectedValue) | ||
| { | ||
| await Task.Delay(400); // simulate real network and database delays. Remove in a real app | ||
|
|
||
| return await Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.Id)); | ||
| } | ||
| } |
There was a problem hiding this comment.
Task.FromResult is some weird approach that we have in very old examples, but it's completely unnecessary.
| public static async Task<Person> GetItemFromValue(int selectedValue) | |
| { | |
| await Task.Delay(400); // simulate real network and database delays. Remove in a real app | |
| return await Task.FromResult(AllData.FirstOrDefault(x => selectedValue == x.Id)); | |
| } | |
| } | |
| public static async Task<Person?> GetItemFromValue(int selectedValue) | |
| { | |
| await Task.Delay(400); // simulate real network and database delays. Remove in a real app | |
| return AllData.FirstOrDefault(x => selectedValue == x.Id); | |
| } |
| Total = result.Total | ||
| }; | ||
|
|
||
| return await Task.FromResult(dataToReturn); |
There was a problem hiding this comment.
| return await Task.FromResult(dataToReturn); | |
| return dataToReturn; |
| ComboBoxRef?.Refresh(); | ||
| } | ||
|
|
||
| async Task<Person> GetModelFromValue(int selectedValue) |
There was a problem hiding this comment.
Avoids a compiler warning
| async Task<Person> GetModelFromValue(int selectedValue) | |
| async Task<Person?> GetModelFromValue(int selectedValue) |
georgedautov
force-pushed
the
combobox-loader-kb-example
branch
from
f1d3623 to
fa6a7ad
Compare
No description provided.