How to implement multicolumn filtering with remote data using JavaScript ComboBox Component?

3 mins read

This article explains how to implement multicolumn filtering with remote data using the JavaScript ComboBox Component. To implement multicolumn filtering in a JavaScript ComboBox component can significantly enhance the user experience, especially when dealing with remote data sources. This functionality allows users to filter options based on multiple data fields, providing a more dynamic and responsive interface. This guide provides a comprehensive walkthrough on how to achieve multicolumn filtering using remote data in a ComboBox Component.

Overview

To achieve multicolumn filtering with ComboBox, we’ll utilize an ItemTemplate for displaying data in multiple columns and a filtering event to apply the search criteria across the desired columns.

Implementation:

In the filtering event, a predicate is constructed to filter the necessary fields based on the filtered text. The or operator is employed to add multiple fields to check if the filtered text is present in any of them. These predicate conditions are then applied to the query using the where method. Finally, the query is executed using DataManager, and the ComboBox’s data is updated accordingly using the updateData method.


var comboBoxObj1 = new ej.dropdowns.ComboBox({
  dataSource: new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ej.data.ODataV4Adaptor(),
    crossDomain: true,
  }),
  query: new ej.data.Query()
    .select(['ContactName', 'CustomerID', 'ContactTitle'])
    .take(10),
  placeholder: 'Select a name',
  fields: { value: 'CustomerID', text: 'ContactName' },
  popupHeight: '200px',
  allowFiltering: true,
  itemTemplate:
    '<table>' +
    '<tbody>' +
    '<tr style="width: 100%; padding: 6px;">' +
    '<td style="width: 50px; padding: 6px;">${CustomerID}</td>' +
    '<td style="width: 150px; padding: 6px;">${ContactName}</td>' +
    '<td style="width: 100px; padding: 6px;">${ContactTitle}</td>' +
    '</tr>' +
    '</tbody>' +
    '</table>',
  filtering: (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 predicate = new ej.data.Predicate('ContactName', 'Contains', e.text);
    predicate = predicate.or('CustomerID', 'Contains', e.text);
    predicate = predicate.or('ContactTitle', 'Contains', e.text);
    var query = new ej.data.Query().take(3);
    query = e.text != '' ? query.where(predicate) : query;
    data
      .executeQuery(query) 
      .then((event) => {
        dataValue = event.result;
        e.updateData(dataValue, query); 
      })
      .catch((error) => {
        // Handle errors appropriately
        console.error(error);
      });
  },
});

comboBoxObj1.appendTo('#customers');

Sample Implementation

Refer to the working sample for additional details and implementation: Multi-Column Search Sample

Additional References

Conclusion

We hope you enjoyed learning about how to implement multi-column filtering with remote data using the JavaScript ComboBox component.

You can refer to our JavaScript ComboBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript ComboBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)