Query Builder - Support for dropdown paging

Question

Hello,I am using both the DropdownList and DropdownTree in templates for different columns with the query builder. The data for these dropdowns can be retrieved in 100 item increments, and it is possible for there to be many hundreds or thousands of items that need to be displayed.Is there a way to do virtual scrolling, or load each page of results as necessary?If these dropdowns do not support this, how can I use a custom component for the dropdowns within a template instead?Thank you,KS

Saranya Dhayalan · Answer

Hi KS,We have considered “Provide support to virtual scrolling for DropDown components”
as a certain feature request from our end and logged the report for the same
and the feature will be included on upcoming volume3 main release.You can now track the current status of the report, review the
proposed resolution timeline, and contact us for any further inquiries through
this link:Feedback: https://www.syncfusion.com/feedback/9773/provide-support-to-virtual-scrolling-for-dropdown-componentsCurrently,
we have achieved virtualization support at the sample level using the
actionComplete event. This means that the initial 10 data will be loaded based
on the "take" value in the query, and the remaining data will be
loaded after scrolling. Please refer to the attached sample for further reference.https://stackblitz.com/edit/w6s2an-lgv5ht?file=index.js,index.htmlRegards,Saranya D

KS · Answer

Hello,Thank you for the update.In our case, we would be able to have a method that retrieves 100 items at a time. We would not be able to supply a datasource array with all the items available at the time of loading the dropdown. Would it be possible to implement our own sort of paging using a similar approach to what you have shown, just adding to the datasource?And would this support filtering as well? i.e. An event when the user types something that would allow me to dynamically handle it myself and add those items to the datasource?Thank you,Karen

Keerthikaran Venkatachalam · Answer

Hi KS,We have introduced virtual scrolling support in the Volume 3
release. To illustrate this feature, we've created a sample that showcases
loading 100 items as you scroll. By utilizing the enableVirtualization
property, you can easily meet your specific requirements. Please refer to the
code snippet and sample.

let dropDownObj: DropDownList =
  new DropDownList({
                       dataSource: records,
                       popupHeight:
  "200px",
                       allowFiltering: true,
                       enableVirtualization: true,
                       fields: { text: 'text',
  value: 'id' },
                       // set the placeholder
  to DropDownList input element
                       placeholder: 'e.g. Item
  1',
                   });

Sample: https://stackblitz.com/edit/angular-oxqvuj?file=src%2Fapp.component.ts
For more information, please refer to the below demos and UG
documentation:https://ej2.syncfusion.com/angular/demos/#/material3/drop-down-list/virtual-scrollhttps://ej2.syncfusion.com/angular/documentation/drop-down-list/virtual-scrollPlease let us know if you need any further assistance on
this.