We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Filtering of dynamic dropdown list

I am creating my dropdown on page initialize.

var selectedMill;

 selectedMill = new ej.dropdowns.DropDownList({

                placeholder: "Select Choice",

                    fields: { text: 'Name', value: 'CompanyGUID' },

                    filterType: 'contains',

                    allowFiltering: true,

                    showClearButton: true,

                sortOrder: 'Ascending',   

                });

 selectedMill.appendTo('#millId');


But appending the data to datasource dynamically on a ajax call success.

.......

success: function (result) {

              selectedMill.dataSource = result.contractors;

            }

Now I need to add my filtering dropdown also. Adding below code in ajax success is not helping me to filter....

success: function (result) {

              selectedMill.dataSource = result;

              filtering: (e) => {

                    if (e.text == '') e.updateData( result );

                    else {

                        var query = new ej.data.Query().select(['Name', 'CompanyGUID']);

                        query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;

                        e.updateData(data, query);

                    }

                }

            }


Also tried adding filter code during initilaize itself..


 selectedMill = new ej.dropdowns.DropDownList({

                placeholder: "Select Choice",

                    fields: { text: 'Name', value: 'CompanyGUID' },

                    filterType: 'contains',

                    allowFiltering: true,

                    showClearButton: true,

                sortOrder: 'Ascending',

                filtering: (e) => {

                    if (e.text == '') e.updateData(selectedMill.dataSource);

                    else {

                        var query = new ej.data.Query().select(['Name', 'CompanyGUID']);

                        query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;

                        e.updateData(data, query);

                    }

                }

                });

            selectedMill.appendTo('#millId');

Kindly provide some suggestion on how I can filter dropdown dynamically in ej2 es5. 


5 Replies

SA SureshRajan Alagarsamy Syncfusion Team March 27, 2023 06:56 PM UTC

Hi Remya,


Greetings from syncfusion support.


Based on the details you provided, We understand that you are looking to filter dynamic data in the DropdownList component of our EJ1 product. We would like to inform you that our EJ1 products have been declared as retired products since our volume 4 SP release, and we will not make any improvements to the EJ1 components. We also recommend considering the use of the EJ2 DropdownList component to see if it achieves the exact requirement from your side. We have included a link to the EJ2 DropdownList demo and documentation for your reference. The DropdownList has many features and capabilities, and it is compatible with the EJ1 components. We have also included a link to our compatibility documentation for your reference.


Compatibility documentation : https://help.syncfusion.com/js/compatibility-ej1-ej2


EJ2 demo : https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/drop-down-list/default.html


EJ2 documentation : https://ej2.syncfusion.com/javascript/documentation/drop-down-list/es5-getting-started/


We understand that you may prefer to use the EJ1 DropdownList component to achieve your requirement. If that is the case, please do not hesitate to revert back to us, and we will be happy to assist you in achieving your requirement.


Regards,
Suresh.



RP Remya Pillai replied to SureshRajan Alagarsamy March 28, 2023 10:34 AM UTC

Thanks for the reply.

Im working on ej2 es5 syncfusion grid only.

And I have refered this document for the same:

https://ej2.syncfusion.com/javascript/documentation/drop-down-list/filtering/

When i am appending the data source while creating dd and filtering there itself, I am getting filtered data, like shown in the example.


But what I am doing is, creating the dropdown on page load. And appending its data source on a button click through ajax, in different function. And there this filtering is not working.


Step 1: Creating DD


var selectedMill;

selectedMill = new ej.dropdowns.DropDownList({

placeholder: "Select Choice",

fields: { text: 'Name', value: 'CompanyGUID' },

filterType: 'contains',

allowFiltering: true,

showClearButton: true,

sortOrder: 'Ascending',

});

selectedMill.appendTo('#millId');


Step 2: Getting dd data thru a ajax call in different function and appending it to the dd datasource.

.....ajax call

.......

success: function (result) {

selectedMill.dataSource = result.contractors;

}


Step 3: Adding the filtering code in the dropdown creation code in Step 1

selectedMill = new ej.dropdowns.DropDownList({

placeholder: "Select Choice",

fields: { text: 'Name', value: 'CompanyGUID' },

filterType: 'contains',

allowFiltering: true,

showClearButton: true,

sortOrder: 'Ascending',

filtering: (e) => {

if (e.text == '') e.updateData(selectedMill.dataSource);

else {

var query = new ej.data.Query().select(['Name', 'CompanyGUID']);

query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;

e.updateData(data, query);

}

}

});

selectedMill.appendTo('#millId');


Here, I am not getting filtered data. How can I acheive this.

However when Im appending the datasource in the dd creation code itself, filtering is working.

eg:

selectedMill = new ej.dropdowns.DropDownList({

placeholder: "Select Choice",

       dataSource: searchData,  //But In my scenario I'm dynamically adding datasource. 
How to filter dd in such scenario in ej2 es5

fields: { text: 'Name', value: 'CompanyGUID' },

filterType: 'contains',

allowFiltering: true,

sortOrder: 'Ascending',

filtering: (e) => {

if (e.text == '') e.updateData(selectedMill.dataSource);

else {

var query = new ej.data.Query().select(['Name', 'CompanyGUID']);

query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;

e.updateData(data, query);

}

}

});

selectedMill.appendTo('#millId');


Please suggest.



UD UdhayaKumar Duraisamy Syncfusion Team April 3, 2023 04:53 PM UTC

We have prepared a sample that meets your requirements and have shared it below for your reference. Please refer to the sample for further details.


var data = []; //initialize empty array for data

 

var selectedMill = new ej.dropdowns.DropDownList({

  dataSource: data//set initial data source to empty array

  fields: { text: 'FirstName'value: 'EmployeeID' },

  filterType: 'contains',

  allowFiltering: true,

  showClearButton: true,

  sortOrder: 'Ascending',

  filtering: function (e) {

    e.preventDefaultAction = true;

    var predicate = new ej.data.Predicate('FirstName''contains'e.text);

    predicate = predicate.or('EmployeeID''contains'e.text);

    var query = new ej.data.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(this.dataSourcequery);

  },

});

 

selectedMill.appendTo('#customers');

 

//function to update the data source on button click

document.getElementById('addData').addEventListener('click'function () {

  $.ajax({

    url: 'https://ej2services.syncfusion.com/js/development/api/Employees',

    type: 'GET',

    dataType: 'json',

    success: function (result) {

      data = result//update the data array

      selectedMill.dataSource = result//set the updated data source for the DropDownList

    },

    error: function (error) {

      console.log(error);

    },

  });

});


In the above code, When the "Add Data" button is clicked, an AJAX request is sent to retrieve employee data from a remote server. On success, the retrieved data is assigned to the empty array, and the dropdown list's data source is updated with this new data.


The filtering function is used to handle the filtering of the dropdown list. It first prevents the default action from occurring when a filter is applied. It then creates a new filter predicate using the ej.data.Predicate method, which is set to filter on the FirstName and EmployeeID fields, based on the text entered in the search box.

Next, it creates a new query object using the ej.data.Query method, and sets its filter based on the created predicate if there is text in the search box. If there is no text, the query remains empty.

Finally, it updates the data source of the dropdown list using the updateData method, passing in the data source and the query object to filter the data. This results in the dropdown list being filtered based on the text entered in the search box.


Sample: https://stackblitz.com/edit/hwjpgn?file=index.js




RP Remya Pillai April 6, 2023 11:17 AM UTC

Thanks for the help. It worked.



UD UdhayaKumar Duraisamy Syncfusion Team April 7, 2023 04:42 AM UTC

We are happy to assist you. Please get back to us if you need any further assistance on this.


Loader.
Up arrow icon