We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to load data in combobox when scroll down

I have bind large data in combobox (with EnableVirtualization feature) using below link. The Virtualization working fine as per our requirement. But First time loading of large data (10000 record) is taking time. Instead of Loading Large Data in first time I would like to know how to do below points.Please modify source code from below link


1.On Initial load load first 15 records.

2.When Scroll down, load next 15 records from server

3.When I search for some text, it should load based on search text.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPI473557702


8 Replies

UD UdhayaKumar Duraisamy Syncfusion Team December 1, 2022 05:40 AM UTC

The ComboBox has been provided virtualization to improve the UI performance for a large amount of data when EnableVirtualization is true. This feature doesn’t render out the entire data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining set number of items will load on each scrolling action in the popup. It can work with both local and remote data.


Please refer to the below documentation for more information.

https://blazor.syncfusion.com/documentation/combobox/virtualization



KI KINS December 2, 2022 04:36 AM UTC

Thanks for reply...

I don't have issues on " virtualization".


I have issues on Data Loading from remote server in first time is slow because of large data in List Data.

So I would like to load first 15 records in server on initial load,after scrolling down it should take next 15 reocord from remote server



UD UdhayaKumar Duraisamy Syncfusion Team December 4, 2022 12:50 PM UTC

You can achieve your requirement using ComboBox virtualization. You can use the query property to load data items to the ComboBox component on the initial load as per your requirement.


In the following code, 150 items are bound to the component, but only 15 items will load to the popup when you open the popup. The remaining set number of items will load on each scrolling action in the popup if the EnableVirtualization is true.


@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

 

<SfComboBox TValue="string" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">

    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>

</SfComboBox>

 

@code{

    public Query LocalDataQuery = new Query().Take(15);

public class Record

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    public List<Record> Records { get; set; }

    protected override void OnInitialized()

    {

        this.Records = Enumerable.Range(1, 150).Select(i => new Record()

        {

            ID = i.ToString(),

            Text = "Item " + i,

        }).ToList();

    }

}


Online Demo : Example of Virtualization in Blazor ComboBox Component


The above online example demonstrates the virtualization support of the ComboBox. The component has 150 items bound to it; however, when you open the dropdown popup, only 5 items are loaded, and the remaining items are loaded one by one while scrolling.



KI KINS December 6, 2022 04:19 AM UTC

Thanks for reply....


I don't have Virtualization issues.


I have issues on data loading from server on first time (15000 record)


To over come this issues, I would like to load first 15 record from server on initial load only.


after scrolling down, I would like to know how to load next 15 records from server (Not as Virtualization)


Hope its clear...




UD UdhayaKumar Duraisamy Syncfusion Team December 6, 2022 07:08 AM UTC

You can use the ItemCount property to meet your requirements. You can set it to 15 for your scenario. So, as the popup is scrolled, it will fetch 15 items from the server and add them to the popup.


@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

 

<SfComboBox TValue="string" TItem="Record" Placeholder="Select an item" ItemsCount="15" DataSource="@Records" Query="@LocalDataQuery" EnableVirtualization="true">

    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>

</SfComboBox>

 

@code {

    public Query LocalDataQuery = new Query().Take(15);

    public class Record

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    public List<Record> Records { get; set; }

    protected override void OnInitialized()

    {

        this.Records = Enumerable.Range(1, 15000).Select(i => new Record()

            {

                ID = i.ToString(),

                Text = "Item " + i,

            }).ToList();

    }

}


Documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ItemsCount



KI KINS December 7, 2022 09:34 AM UTC

Thanks for reply...


I need to fetch 15 record only from server on initial load, not as "15,000" record .


When I scroll down, it should load from 16 to 31 record from server


Hope its clear...




KI KINS December 14, 2022 04:59 AM UTC

awaiting for reply...



UD UdhayaKumar Duraisamy Syncfusion Team December 14, 2022 03:49 PM UTC

You need to handle the Take property query on the server side (Based on the Take property value you need to return the data from the server end). You can refer to the below documentation for more information.


https://blazor.syncfusion.com/documentation/combobox/data-source#custom-adaptor


Also, you can refer to the below forums regarding your requirement.


Loader.
Live Chat Icon For mobile
Up arrow icon