Filter Boolean on Click

Environment

Product Version	2016.3.914
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I filter a boolean column on click of the radio button without the need to press the filter button?

Solution

1. Add a filterMenuInit event handler.
2. Check if the field for which the event was triggered is the boolean field
3. Attach a click handler to the radio buttons
4. Programmatically apply the filter using the dataSource filter() method.

    filterMenuInit: function(e){
        var dataSource = this.dataSource;

        if(e.field == "isAdmin"){
            var radioButtons = e.container.find("input[type=radio]");
            radioButtons.click(function(e){
                var boolFilter;
                if(e.target.value === "false"){
                    boolFilter = false;
                } else{
                    boolFilter = true;
                }
                dataSource.filter({field: "isAdmin",operator: "eq", value: boolFilter });
            })
        }
    }

    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        filterMenuInit: function(e){
          var dataSource = this.dataSource;

          if(e.field == "isAdmin"){
            var radioButtons = e.container.find("input[type=radio]");
            radioButtons.click(function(e){
              var boolFilter;
              if(e.target.value === "false"){
                boolFilter = false;
              } else{
                boolFilter = true;
              }
              dataSource.filter({field: "isAdmin",operator: "eq", value: boolFilter });
            })
          }
        },
        columns: [
          { field: "name" },
          { field: "age" },
          { field: "isAdmin", title: "Admin", template: "#=isAdmin? 'Yes' : 'No'#"}
        ],
        filterable: true,
        dataSource:{
          data:[
            { name: "Jane Doe", age: 30, isAdmin: false },
            { name: "John Doe", age: 33 , isAdmin: false},
            { name: "Connor Wild", age: 30, isAdmin: true },
            { name: "Sasha Johnson", age: 33 , isAdmin: true}
          ],
          schema:{
            model:{
              fields:{
                isAdmin:{type: 'boolean'}
              }
            }
          }
        }
      });
    </script>