From 7b6114d4a756b13e3a2e18326bbb0cebe66df0b5 Mon Sep 17 00:00:00 2001 From: georgedautov Date: Mon, 21 Jul 2025 17:20:45 +0300 Subject: [PATCH 1/2] chore(example): Add new kb article combobox-virtualization-loader --- .../combobox-virtualization-loader.md | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 knowledge-base/combobox-virtualization-loader.md diff --git a/knowledge-base/combobox-virtualization-loader.md b/knowledge-base/combobox-virtualization-loader.md new file mode 100644 index 000000000..927c79d50 --- /dev/null +++ b/knowledge-base/combobox-virtualization-loader.md @@ -0,0 +1,128 @@ +--- +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: combobox-kb-virtualization-loader +position: +tags: blazor, combobox, loader, templates, nodatatemplate, headertemplate +res_type: kb +ticketid: 1693304 +--- + +## Environment + + + + + + + + +
ProductComboBox for Blazor
+ +## Description + +When using the [ComboBox](slug:components/combobox/overview) component in UI for Blazor with remote data loading and virtualization, the dropdown briefly displays the "No data" message while waiting for the response. This behavior can confuse users who may assume there is no data available when it is still loading. Additionally, during virtual scrolling or filtering, the absence of a loading indicator can lead to user frustration as they cannot perceive ongoing data fetch operations. + +## Solution + +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. + +>caption Display a Loading Indicator When Using a Virtualized ComboBox + +```razor +@using Telerik.DataSource +@using Telerik.DataSource.Extensions + +

@SelectedValue

+ +@if (IsLoading == true) { + +} + + + + + + + + + + + +@code{ + bool IsLoading {get;set;} = false; + int SelectedValue { get; set; } = 1234; // pre-select an item to showcase the value mapper + private TelerikComboBox? ComboBoxRef { get; set; } + private List AllData { get; set; } + private async Task GetRemoteData(ComboBoxReadEventArgs args) + { + IsLoading = true; + ComboBoxRef?.Refresh(); + await LoadData(); + + var result = AllData.ToDataSourceResult(args.Request); + + // set the Data and the TotalItems to the current page of data and total number of items + args.Data = result.Data; + args.Total = result.Total; + IsLoading = false; + ComboBoxRef?.Refresh(); + } + + private async Task GetModelFromValue(int selectedValue) + { + await Task.Delay(400); // simulate real network and database delays. Remove in a real app + + return AllData.FirstOrDefault(x => selectedValue == x.Id); + } + + private async Task LoadData() + { + await Task.Delay(1500); + if (AllData == null) + { + AllData = Enumerable.Range(1, 12345).Select(x => new Person { Id = x, Name = $"Name {x}" }).ToList(); + } + } + + public class Person + { + public int Id { get; set; } + public string Name { get; set; } + } +} +``` + +### 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. + +## See Also +- [ComboBox HeaderTemplate Documentation](slug:components/combobox/templates#header-template) +- [ComboBox Reference and Methods](slug:components/combobox/overview#combobox-reference-and-methods) +- [ComboBox Virtualization Documentation](slug:combobox-virtualization#remote-data-example) \ No newline at end of file From 39967aa6cf3feb525bc343722350d69f62f44c6f Mon Sep 17 00:00:00 2001 From: George Dautov Date: Tue, 2 Sep 2025 13:11:14 +0300 Subject: [PATCH 2/2] chore(example): Polish combobox virtualization loader kb article Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/combobox-virtualization-loader.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/knowledge-base/combobox-virtualization-loader.md b/knowledge-base/combobox-virtualization-loader.md index 927c79d50..13356017e 100644 --- a/knowledge-base/combobox-virtualization-loader.md +++ b/knowledge-base/combobox-virtualization-loader.md @@ -41,7 +41,7 @@ Modify the visibility of old items using CSS rules and conditionally toggle thei

@SelectedValue

-@if (IsLoading == true) { +@if (IsLoading) {