Getting errors while implementing filtering in DropDownList

Question

We have grid with dropdowns, while filtering the list we are getting errors.

Filtering Code:

 filtering: (e: any) => {
            const data = dropDownList.dataSource
            let predicate = new Predicate('fullDescription', 'startswith', e.text, true);
            let query: Query = new Query();
            //frame the query based on search string with filter type.
            query = (e.text !== '') ? query.where(predicate) : query;
            //pass the filter data source, filter query to updateData method.
            e.updateData(data, query);
          },

Error:-

Developer Error: DataManager - executeLocal() : A query is required to execute

Error: DataManager - executeLocal() : A query is required to execute

at Function.DataUtil.throwError (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:24147:11)

at DataManager.executeLocal (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:28413:16)

at Query.executeLocal (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:291397:26)

at Observer.<anonymous> (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:29664:72)

at Observer.notify (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:12421:24)

at DropDownList.trigger (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:16421:37)

at DropDownList.setListData (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:29630:14)

at DropDownList.resetList (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:30052:18)

at DropDownList.filteringAction (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:31877:22)

at Object.updateData (http://localhost:4200/ap/default-node_modules_ng-dialog-animation_fesm2015_ng-dialog-animation_js-src_app_shared_handl-068944.js:31831:30)

Deepak Ramakrishnan · Accepted Answer

Hi Ansuman, 

Greetings from Syncfusion support.   
   
Based on your provided details, we suspect that the cause of the reported issue is due to the installation of duplicate packages in your application. In general, duplicate package will be installed when there is any version mismatch between the packages. Please follow the steps specified in below UG documentation to resolve this issue in your end.   
   
https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/     

Also, we would like to inform you that if the entry for the Syncfusion package with different version then it will lead to install the duplicate in your application. For example, if the “ej2-angular-dropdowns” package having the version with “19.*.*” and other Syncfusion package having the version with “18.*.*” or different version against dropdown package version will leads to the reported console error.  So please use same package version for Syncfusion components in your application. We have prepared sample below for reference, please find below.   

Sample: https://stackblitz.com/edit/angular-kxeepw-8mylxk?file=app.component.ts 

Could you please run the sample after updating package as specified in the above documentation and get back to us with more information if you still face the issue or need any further assistance on this.  
 
Thanks, 
Deepak R.