Filter on Virtual Sroll for large amount of data on dropdownlist

Question

Hello teamWhile i am testing dropdownlist with large dataset i stumbled upon following posts and attempted to build onesamplehttps://stackblitz.com/edit/angular-wk51f5-yhux7v?file=app.component.ts but 1. filtering is not working for me.2. as well can this be working with reactive form without the viewchild reference?Posts i refered.https://www.syncfusion.com/forums/164152/virtualize-dropdownlist-with-local-data https://www.syncfusion.com/forums/125206/dropdownlist-search-filtering-for-all-records-in-vritualscroll-mode-and-grid-loading https://www.syncfusion.com/forums/156344/dropdown-with-huge-data Thank youRaj

Sureshkumar P · Answer

Hi Raj,Query 1: filtering is not working for me.When enable the filtering textbox we need to calculate
the popup scrollheight with filtering textbox component as like below code
example.Find the code example here:

[component.ts]
   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 +
          (this.listObj as any).filterInput.offsetHeight +
          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);
                  this.listObj.addItem((event as any).result);
                }
                if ((event as any).result.length === 0) {
                  operator = null;
                }
              })
              .catch((e) => { });
          }
        }
      });
    }

Query 2: as well can this be working with reactive
form without the viewchild reference?We can be achieving the virtualization with reactive form,
but we cannot achieve virtualization without viewchaild instance. Because we
need to call the Additem public method to add the additional data into the
component. This public method not able to call without component instance. We have modified your attached sample virtualization
with reactive form. Find the sample here: https://stackblitz.com/edit/angular-wk51f5-jmnzgn?file=app.component.ts
Regards,Sureshkumar P