How to load data in combobox when scroll down

[KINS]

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

[UdhayaKumar Duraisamy]

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

[KINS]

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

[UdhayaKumar Duraisamy]

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.

[KINS]

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...

[UdhayaKumar Duraisamy]

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

[KINS]

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...

[KINS]

awaiting for reply...

[UdhayaKumar Duraisamy]

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.

• https://www.syncfusion.com/forums/173653/multiselect-wtih-custom-data-adaptor-filtering

• https://www.syncfusion.com/forums/176046/custom-dataadaptor-datamanagerrequest-with-enablevirtualization