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.
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.
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.
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.dataSource, query); }, });
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
Thanks for the help. It worked.
We are happy to assist you. Please get back to us if you need any further assistance on this.