Edit this page

Set Multi-Checkbox Filtering to Use contains instead of equalTo

Environment

Product Progress Kendo UI Grid

Description

A Grid column contains comma-delimited values (AAA,BBB,CCC) and uses checkboxes to perform filtering.

How can I set a checkbox for each unique value and filter the data by using contains instead of equalTo? For example:

AAA
BBB
CCC

Solution

The built-in multi-checkbox filtering uses the data from the Grid and the values will match the entire field value.

To customize the filter:

  1. Define a custom dataSource for the filter in the column with the unique values.

  2. Within the filter event of the Grid, modify the filter expression and change them to contains.

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
  filter: function(e){
    if(e.field == "someField"){
        e.filter.filters.forEach(function(f){
        f.operator = "contains";
      })
    }
  },
  filterMenuOpen: function(e){
    if(e.sender.dataSource.filter()){
      e.sender.dataSource.filter().filters.forEach(function(f){
        if(f.field == "someField"){
          var checkbox = e.container.find("input[value='"+f.value+"']");
          if(!checkbox[0].checked){
            e.container.find("input[value='"+f.value+"']").click()  
          }          
        }
      })
   }
  },
  columns: [ {
    field: "someField",
    filterable: {
        multi:true,
      dataSource: [ { someField: "AAA" }, { someField: "BBB" }, { someField: "CCC" } ]
    }
  } ],
  filterable: true,
    dataSource: [ { someField: "AAA, BBB" }, { someField: "CCC" } ]
  });

</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy