From abb85689f60b0b6888fe805873fcccc4699e293c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 25 Sep 2025 14:56:45 +0300 Subject: [PATCH] kb(Selects): Add KB for virtual scrolling skeletons --- .../common/dropdowns-virtualization.md | 2 +- ...ator-skeletons-during-virtual-scrolling.md | 162 ++++++++++++++++++ 2 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 knowledge-base/dropdowns-show-loading-indicator-skeletons-during-virtual-scrolling.md diff --git a/_contentTemplates/common/dropdowns-virtualization.md b/_contentTemplates/common/dropdowns-virtualization.md index 954465b0a..4aca64804 100644 --- a/_contentTemplates/common/dropdowns-virtualization.md +++ b/_contentTemplates/common/dropdowns-virtualization.md @@ -33,7 +33,7 @@ the component will call this method to request the model that matches the `Value #limitations * When the initially selected item is not on the first page, the dropdown does not scroll to it on first opening. -* The component calculates the position of the dropdown items during virtual scrolling. In this case, the loading indicators (skeletons) do not display as they will affect the proper item positioning. +* The component calculates the position of the dropdown items during virtual scrolling. In this case, the loading indicators (skeletons) do not display as they will affect the proper item positioning. You can [add loading skeletons to the virtual dropdown with CSS](slug:dropdowns-kb-show-loading-indicator-skeletons-during-virtual-scrolling). #end #remote-data-sample-intro diff --git a/knowledge-base/dropdowns-show-loading-indicator-skeletons-during-virtual-scrolling.md b/knowledge-base/dropdowns-show-loading-indicator-skeletons-during-virtual-scrolling.md new file mode 100644 index 000000000..d55298522 --- /dev/null +++ b/knowledge-base/dropdowns-show-loading-indicator-skeletons-during-virtual-scrolling.md @@ -0,0 +1,162 @@ +--- +title: Display Loading Indicators during Virtual Scrolling +description: Learn how to display loading skeleton indicators during virtual scrolling in a Telerik Blazor AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, and MultiSelect componenta. +type: how-to +page_title: How to Display Loading Indicators during Virtual Scrolling +slug: dropdowns-kb-show-loading-indicator-skeletons-during-virtual-scrolling +tags: telerik, blazor, virtualization, autocomplete, combobox, dropdownlist, multicolumncombobox, multiselect +ticketid: 1587267, 1699463 +res_type: kb +--- + +## Environment + + + + + + + + +
Product + AutoComplete for Blazor,
+ ComboBox for Blazor,
+ DropDownList for Blazor,
+ MultiColumnComboBox for Blazor,
+ MultiSelect for Blazor +
+ +## Description + +This KB article answers the following questions: + +* How to show loading indicators in the Telerik select components during virtual scrolling? +* How to display loading skeletons while the user scrolls a Telerik dropdown component with virtual scroll mode? +* How to improve the Telerik dropdown virtualization styling and add gray bars during scrolling? + +## Solution + +To show loading indicators (skeletons) during virtual scrolling of Telerik dropdown components: + +1. Add an image to your app, which looks like one or more lines of skeletons. +1. Set the image as a repeating background to the `.k-list-container .k-virtual-scroller-size` CSS combinator. +1. Apply a background color to `.k-list-container .k-list-ul`, so that users do not see the background image behind the rendered dropdown items. + +>caption Display skeleton loading indicators during virtual scrolling of Telerik dropdown components + +````RAZOR +@using Telerik.DataSource +@using Telerik.DataSource.Extensions + + + + + + + +@code { + private List ListItems { get; set; } = new(); + + private int SelectedValue { get; set; } = 3; + + // Use the correct event argument type in your app. + // ReadEventArgs is a base type. + private async Task OnSelectRead(ReadEventArgs args) + { + DataSourceResult result = await ListItems.ToDataSourceResultAsync(args.Request); + + args.Data = result.Data; + args.Total = result.Total; + } + + private async Task GetItemFromValue(int id) + { + // Simulate async operation. + await Task.Delay(100); + return ListItems.FirstOrDefault(x => x.Id == id); + } + + protected override void OnInitialized() + { + var rnd = Random.Shared; + + ListItems = Enumerable.Range(1, 1000).Select(x => + { + return new ListItem() + { + Id = x, + Text = $"Item {x} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}" + }; + + }).ToList(); + + base.OnInitialized(); + } + + public class ListItem + { + public int Id { get; set; } + public string Text { get; set; } = string.Empty; + } +} +```` + +## Notes + +The Base64-encoded SVG image above was created from the following markup. You can modify it, according to your preferences, instead of starting from scratch. + +````HTML + + + Skeletons + + + + + + +```` + +## See Also + +* [AutoComplete Virtualization](slug:autocomplete-virtualization) +* [ComboBox Virtualization](slug:combobox-virtualization) +* [DropDownList Virtualization](slug:dropdownlist-virtualization) +* [MultiColumnComboBox Virtualization](slug:multicolumncombobox-virtualization) +* [MultiSelect Virtualization](slug:multiselect-virtualization)