Virtualize dropdownlist with local data

Question

Hello,

Datasourcee of my dropdownlist is bind with | async, and it take a long time when want to show all datas in my dropdownlist.

Could you provide me any example how to virtualize dropdownlist with local data ?

I'm not using datamanager but simple data from json.

thx

Ponmani Murugaiyan · Accepted Answer

Hi Foulont,

Greetings from Syncfusion support.

Query: Could you provide me any example how to virtualize dropdownlist with local data ?

We have prepared sample as per your requirement “Virtualization with Dropdownlist local data”. Please find the sample below for reference.

ejs-dropdownlist

id="games"

#sample

[dataSource]="sportsData"

[fields]="fields"

[placeholder]="waterMark"

[popupHeight]="height"

[query]="query"

(actionComplete)="onActionComplete($event)"

></ejs-dropdownlist>

public onActionComplete(e) {

var operator = this.query1 ? null : new Query();

var start;

var end;

if (!this.isFilter) {

start = e.result.length;

end = e.result.length + 5;

}

var listElement = (this.listObj as any).list;

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

if (

listElement.scrollTop + listElement.offsetHeight >=

listElement.scrollHeight

) {

var filterQuery = operator ? operator.clone() : operator;

filterQuery = filterQuery ? filterQuery.range(start, end) : filterQuery;

if (filterQuery) {

new DataManager(this.sportsData)

.executeQuery(filterQuery)

.then(event => {

start = end;

end += 5;

if (!this.isFilter) {

this.listObj.addItem((event as any).result);

}

if ((event as any).result.length === 0) {

operator = null;

}

})

.catch(e => {});

}

});

}

Sample: https://stackblitz.com/edit/angular-wk51f5-jmtbwq?file=app.component.ts

Please get back us if you need further assistance.

Regards,

Ponmani M

Unknown · Answer

Hello, Thanks for your example.It works but when I set dynamically a default value to dropdownlist at init (ie; val "Game23") with out of range it doesn't select the value inside the dropdownlist.

Ponmani Murugaiyan · Answer

HI Foulont, 

Thanks for the update. 

We are currently working on the reported requirement. We will customize the sample and update in 2 business days. We appreciate your patience until then. 

Regards, 
Ponmani M

Unknown · Answer

Hello,Any update on my request ?thx

Ponmani Murugaiyan · Answer

Hi Foulont, 

Sorry for the delay. 

Based on your reported query, we suspect that "you are trying to add the value that is not in the dataSource's initial count". The data will not be retrieved when taken beyond the initial count of the datasource before get scrolling. We suggest you to use the below work around solution to get rid of the reported issue. We have added to the dynamic value property along with some values, the value Game23 which is not included in the initial range count. Using the predicate, we took that particular item and applied it to the dynamic value property. Please find the code snippet and the test sample below for reference. 





clickMe() { 
var predicate = new Predicate("Game", "equal", "Football3"); 
predicate = predicate.or("Id", "equal", "Game23"); 
var query = new Query(); 
new DataManager(this.sportsData) 
    .executeQuery(query.where(predicate).take(1)) 
    .then(e => { 
    var items = (e as any).result[0].Id; 
    var items1 = (e as any).result[0].Game; 
    this.listObj.addItem({ Id: items, Game: items1 }); 
    this.listObj.value = items; 
    }) 
    .catch(e => true); 
} 

Sample: https://stackblitz.com/edit/angular-wk51f5-bvbn5t?file=app.component.ts  

Please get back us if you need further assistance. 

Regards, 
Ponmani M

Unknown · Answer

Hello,I have checked your stackblitz but it not workfing properly. If we scroll we have the same data even if the source is good.check this stackblitz here : https://stackblitz.com/edit/angular-wk51f5-e3heq5?file=app.component.ts

Ponmani Murugaiyan · Answer

Hi Foulont, 

Sorry for the inconvenience caused. 

We have removed the duplicate items in the popup when scrolling by comparing the dynamically added items with the event.result and based on finding the index removed the specific index using splice method as like below highlighted code snippet. 






public dynamicAddItem: string = "Game22"; 
 
public onActionComplete(e) { 
    var operator = this.query1 ? null : new Query(); 
    var start; 
    var end; 
    if (!this.isFilter) { 
      start = e.result.length; 
      end = e.result.length + 5; 
    } 
    var listElement = (this.listObj as any).list; 
    listElement.addEventListener("scroll", () => { 
      if ( 
        listElement.scrollTop + listElement.offsetHeight >= 
        listElement.scrollHeight 
      ) { 
        var filterQuery = operator ? operator.clone() : operator; 
        filterQuery = filterQuery ? filterQuery.range(start, end) : filterQuery; 
        if (filterQuery) { 
          new DataManager(this.sportsData).executeQuery(filterQuery).then(event => { 
              start = end; 
              end += 5; 
              if (!this.isFilter) { 
                //Before adding the items, here compared and removed the duplicate of dynamically added item 
                if ((event as any).result.some(game => game.Id === this.dynamicAddItem)) { 
                  var index = (event as any).result.findIndex(x => x.Id === this.dynamicAddItem); 
                  (event as any).result.splice(index, 1); 
                } 
                this.listObj.addItem((event as any).result); 
              } 
              if ((event as any).result.length === 0) { 
                operator = null; 
              } 
            }) 
           .catch(e => {}); 
        } 
      } 
    }); 
  } 
 

Sample: https://stackblitz.com/edit/angular-wk51f5-yhuhdl?file=app.component.ts 

Regards, 
Ponmani M