Filter Multiselect with primitive array as DataSource

The following example shows how to filter a MultiSelect using a Query:Filtering in JavaScript MultiSelect control - Syncfusion.But all examples are based on complex data types. What if I want to filter a primitive array of string? How does the query look like in this case?
ddcomp = new MultiSelect({
          dataSource: companiesdepartments,
          placeholder:"Select one or more entries",
          allowFiltering:true,
          noRecordsTemplate:"No entries found",
          filtering: function (e: FilteringEventArgs) {
            let query = new Query();
            query = (e.text != "") ? query.where("Ihavenocolumnname""contains", e.text, true) : query;
            e.updateData(companiesdepartments, query);
        }
      });

5 Replies

VS Vignesh Srinivasan Syncfusion Team January 6, 2021 08:10 AM UTC

Hi Markus, 
 
Greetings from Syncfusion support.   
 
We have created sample based on your requirement. Please find the code sample below. 
 
Code snippet: 
 
let sportsDatastring[] = [ 
    "Snooker", 
    "Tennis", 
    "Cricket", 
    "Football", 
    "Rugby" 
  ]; 
   
  let listObjMultiSelect = new MultiSelect({ 
    dataSource: sportsData, 
    placeholder: "Select countries", 
    allowFiltering: true 
  }); 
  listObj.appendTo("#list"); 
 
 
 
Kindly check with the sample. Please get back to us if you need further assistance. 
 
Regards, 
 
Vignesh Srinivasan. 



MA Markus January 6, 2021 08:17 AM UTC

Hi, thanks for your quick reply. If I use the "allowFiltering" property, the filter works as "startsWith". But I would need a "contains" filter, as my string array contains multiple words for each entry.
https://c4twvm-qymaga.stackblitz.io

Thanks, Markus


VS Vignesh Srinivasan Syncfusion Team January 6, 2021 09:36 AM UTC

Hi Markus, 
 
 
We can able to achieve your requirement using the property filterType. It determines on which filter type, the MultiSelect component needs to be considered on search action. 
 
Code snippet: 
 
let sportsDatastring[] = [ 
    "Snooker", 
    "Tennis", 
    "Cricket", 
    "Football", 
    "Rugby" 
  ]; 
   
  let listObjMultiSelect = new MultiSelect({ 
    dataSource: sportsData, 
    placeholder: "Select countries", 
  filterType: "Contains", 
    allowFiltering: true 
  }); 
  listObj.appendTo("#list"); 
 
 
 
 
Kindly check with the sample. Please get back to us if you need further assistance. 
 
Regards, 
 
Vignesh Srinivasan. 



MA Markus January 6, 2021 09:59 AM UTC

Hi, thanks for your help. The error message in this case was: Object literal may only specify known properties, and 'filterType' does not exist in type 'MultiSelectModel'.
But after upgrading from 17.2. to 17.4. everything works as expected.
Thanks Markus



VS Vignesh Srinivasan Syncfusion Team January 7, 2021 05:07 AM UTC

Hi Markus, 

Thanks for the update. 
We are happy to hear that your issue has been resolved. 
Please get back to us if you need further assistance. 

Regards, 

Vignesh Srinivasan. 


Loader.
Up arrow icon