Allow custom value and filter in all columns in MultiColumn Combobox

[Laurin S]

Hi,

two questions about the multicolumn combobox:

1. How can I allow a custom value as input?
2. How can I filter in all columns when a user inputs some text and the input value could appear in all columns?

Thanks.

[Mallesh Ravi Chandran]

Hi Laurin S , 

We would like to inform you that, currently there is no built-in support for allowing custom values in the MultiColumn ComboBox. Regarding your second query, filtering across all columns can be achieved using the filtering event along with a custom filtering function. Below is a JavaScript implementation that demonstrates how you can filter the input text across all columns of the data source:

var multicolumnObj = new ej.multicolumncombobox.MultiColumnComboBox({

  dataSource: window.employee,

  columns: columns,

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

  allowFiltering: true,

  filtering: function (e) {

    var input = e.text.toLowerCase();

    var filtered = window.employee.filter(function (item) {

      return Object.values(item).some(function (val) {

        var valueStr = String(val).toLowerCase();

        if (filterType === 'StartsWith') return valueStr.startsWith(input);

        if (filterType === 'EndsWith') return valueStr.endsWith(input);

        return valueStr.includes(input); // Default: Contains

      });

    });

    e.updateData(filtered);

  },

});

multicolumnObj.appendTo('#filtering');

Sample : https://stackblitz.com/edit/cr3crps2-wmtlvobq?file=index.js,index.html

This approach ensures that filtering will consider all fields defined in the columns, allowing users to search by any visible column value, not just the primary text field. We have also prepared the simple sample for your reference , please review the sample and if you have any concerns please get back to us. 

Regards, 
Mallesh R

[Laurin S]

Hi,

ok, thanks for the reply.

PS:

I think it would be more precise/correct to name that component "Multi-column DropDown", since by definition:

"A combobox allows users to either select an item from a dropdown list or type in a new value, while a dropdown list only allows selection from the provided list."

And currently the component does not support this crucial aspect...

[Mallesh Ravi Chandran]

Hi Laurin S, 

We would like to inform you that , in the Multicolumn ComboBox component you can add a custom value to the list by following this approach:

• When a user types a value not present in the data source, a button labeled "Add New Item" appears in the noRecordsTemplate.

• By clicking this button, the typed value is added as a new item to the data source and is automatically selected using the addItems method and value property.

• This process is illustrated in the filtering event handler, allowing easy addition of custom values to the data source.
  
  
  
  
  
  Documentation Reference : https://ej2.syncfusion.com/javascript/documentation/api/multicolumn-combobox/#additems
• Sample : https://stackblitz.com/edit/7zmj3txj-nfaax8az?file=index.js

We have also prepared the simple sample for your reference . Please review the sample and if you have any concerns, please get back to us. 

Regards, 

Mallesh R