Multiselect dropdown

Thread ID:	Created:	Updated:	Platform:	Replies:
147528	Sep 14,2019 06:42 AM UTC	Sep 16,2019 06:53 AM UTC	React - EJ 2	1

Subscribe to this post

Tags: MultiSelectDropdown

binu

Asked On September 14, 2019 06:42 AM UTC

HI Team,

I should dynamically bind data to dropdown list.

I have more than 1lac record to be binded in dropdown, so I tried initially to load only 50 records.

Based on user search try to retrieve the records from the db and show. also when users scrolls try to retrieve the next records.

Can u tell me which event of the dropdown list I should use in order to do this.

Because there is only data source value which I can bind, later if I scroll how can I bind also on search it should call my api, not get the value from datasource.

Should I use the on change event to do this?

Thanks,

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On September 16, 2019 06:53 AM UTC

Hi Binu,

Thank you for contacting Syncfusion support.

We have checked your query and we suggest you use Virtual Scrolling technique which loads items on demand while having huge amount of data. We can achieve this by loading items manually on scrolling. Here we have initially loaded the 10 items using take property in query. And when you scroll the popup dynamically we have updated the list items by demand. We can use the open event in the multi select control and bind the scroll event for the popup list event. Please refer to the below code snippet,

Code Snippet

this.query = new Query().select(['CustomerID']).take(10);

onOpen(args){

if(!this.isInitial){

var start = 7;

var end = 12;

var listElement = this.multiselectObj.popupObj.element.firstChild;

listElement.addEventListener('scroll', () => {

if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) {

var filterQuery = this.query.clone();

this.data.executeQuery(filterQuery.range(start, end)).then((event) => {

start = end;

end += 5;

this.multiselectObj.addItem(event.result);

}).catch((e) => {

});

}

})

}

Sample Link: https://stackblitz.com/edit/react-jlwbsr?file=index.js

Could you please check the above details and get back to us, if you need any further assistance on this?

Regards,

Vinoth Kumar S

Reply | Reply with quote

Multiselect dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US