Is there an option to enable the filtering on DropDownList

[Sri Nistala]

Hi,

I have aDropdownList and its populating data using DataManager. I have used the below options. But for some reason, the dropdownlist filter input text control is disabled and users are unable to type anything. 

allowFiltering: true,

filterType: 'contains',

ignoreCase: trye,

showClearButton: true,

filtering: function(e){

 let query = new Query();

        //frame the query based on search string with filter type.

        query = (e.text != "") ? query.where("Country", "startswith", e.text, true) : query;

        //pass the filter data source, filter query to updateData method.

        e.updateData(searchData, query);

}

below is the screenshot of the dropDownlist with disabled input. Is there any option to enable it?

[Yohapuja Selvakumaran]

Hi Sri Nistala,

Thank you for reaching out to us. We have thoroughly reviewed your requirement and have created a sample based on the information provided. Upon validation, we can confirm that the filtering functionality is working as expected.

Furthermore, we would like to emphasize that when utilizing the datamanager to populate data, it is crucial to execute the query. This ensures that the data is fetched and displayed correctly.

Code Snippet

filtering: function (e) {

    e.preventDefaultAction = true;

    var data = new ej.data.DataManager({

      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',

      adaptor: new ej.data.ODataV4Adaptor(),

      crossDomain: true,

    });

    var dropdown_query = new ej.data.Query();

    // frame the query based on search string with filter type.

    dropdown_query =

      e.text !== ''

        ? dropdown_query.where('ContactName', 'Contains', e.text, true)

        : dropdown_query;

    data

      .executeQuery(dropdown_query) // Use the created query here

      .then((event) => {

        dataValue = event.result;

        e.updateData(dataValue, dropdown_query); // Pass the query to updateData method

      })

      .catch((error) => {

        // Handle errors appropriately

        console.error(error);

      });

  },

 

You can review the sample and accompanying gif image via the following link:

Sample: https://stackblitz.com/edit/gmqfg1-38jraz?file=index.js

Additionally, we want to inform you that the dropdown component is designed to be readonly. Therefore, the filter bar is included inside the popup.

Regards,

Yohapuja S