New to Kendo UI for jQuery? Start a free 30-day trial

Columns.filterable

configuration

If set to true a filter menu will be displayed for this column when filtering is enabled. If set to false the filter menu will not be displayed. By default a filter menu is displayed for all columns when filtering is enabled via the filterable option.

Can be set to a JavaScript object which represents the filter menu configuration.

columns.filterable

Boolean|Object

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", filterable: false },
    { field: "age" }
  ],
  filterable: true,
  dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
</script>

columns.filterable.cell

Object

Specifies options for the filter header cell when filter mode is set to 'row'.

Can be set to a JavaScript object which represents the filter cell configuration.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    {
        field: "name",
        filterable: {
            cell: {
                enabled: true,
                delay: 1500
            }
        },
    },
    { field: "age" }
  ],
  filterable: {
      mode: "row"
  },
  dataSource: {
  	data: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }],
    schema:{
    	model:{
        	fields: {
            	age: { type: "number" }
            }
        }
    }
  }
});
</script>

columns.filterable.checkAll

Boolean

Controls whether to show or not the checkAll checkbox before the other checkboxes when using checkbox filtering.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "country",
    filterable: {
    multi:true,
      checkAll: false
    }
  }],
filterable: true,
  dataSource: [ { country: "BG" }, { country: "USA" } ]
});
</script>

columns.filterable.dataSource

Object|Array|kendo.data.DataSource

The dataSource configuration for the items that will be used when columns.filterable.multi is enabled.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "country",
    filterable: {
        multi:true,
        dataSource: [{country: "BG"},{country: "GRM"}, {country: "USA"}]
    }
  } ],
filterable: true,
  dataSource: [ { country: "BG" }, { country: "USA" } ]
});
</script>

columns.filterable.extra

Boolean

If set to true the filter menu of the column allows the user to input a second criterion.

Default: true

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" , filterable : { extra: false }},
      { field: "age" }
    ],
    filterable: true,
    dataSource: {
     data: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }],
      schema:{
      	model:{
          	fields: {
              	age: { type: "number" }
              }
          }
      }
    }
  });
</script>

columns.filterable.ignoreCase

Boolean

Toggles between case-insensitive (default) and case-sensitive searching.

Default: true

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [{
            field: "country",
            filterable: {
                multi: true,
                search: true,
                ignoreCase: true
            }
        }],
        filterable: true,
        dataSource: [{ country: "BG" }, { country: "USA" }]
    });
</script>

columns.filterable.itemTemplate

Function

Allows customization on the logic that renders the checkboxes when using checkbox filtering.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [ {
            field: "country",
            filterable: {
                multi:true,
                itemTemplate: function(e) {
                    return ({country, all}) => `<span><label><span>${country || all}</span><input type='checkbox' name='" + e.field + "' value='${country}'/></label></span>`
                }
            }
        }],
        filterable: true,
        dataSource: [ { country: "BG" }, { country: "USA" } ]
    });
</script>

columns.filterable.multi

Boolean

Use this option to enable the MultiCheck filtering support for that column.

If you have enabled the columns.multi option and your Grid uses serverPaging (or ServerOperations(true) when using the MVC wrappers) you will need to provide columns.filterable.dataSource. Otherwise, a negative impact on the performance could be observed.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "country",
    filterable: {
        multi:true
    }
  } ],
filterable: true,
  dataSource: [ { country: "BG" }, { country: "USA" } ]
});
</script>

columns.filterable.operators

Object

The property is identical to filterable.operators, but is used for a specific column.

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      {
        field: "name",
        filterable:{
          operators:{
            string:{
              eq: "custom equal",
              neq: "custom not equal"
            }
          }
        }
      },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            name: { type: "string" },
            age: { type: "number" }
          }
        }
      }
    },
    filterable: {
      extra: false
    }
  });
</script>

columns.filterable.search

Boolean

Controls whether to show a search box when checkbox filtering is enabled.

Default: false

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [{
            field: "country",
            filterable: {
                multi: true,
                search: true
            }
        }],
        filterable: true,
        dataSource: [{ country: "BG" }, { country: "USA" }]
    });
</script>

columns.filterable.ui

String|Function

The role data attribute of the widget used in the filter menu or a JavaScript function which initializes that widget.

This feature is not supported for columns which have their values option set.

If filterable.mode is set to 'row', columns.filterable.cell.template should be used to customize the input.

Parameters:elementHTML Element

An html input element that will be rendered in the filter menu.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "date",
    filterable: {
      ui: "datetimepicker" // use Kendo UI DateTimePicker
    }
  } ],
  filterable: true,
  dataSource: {
      data:[ { date: new Date() }, { date: new Date() } ],
      schema: {
        model: {
          fields: {
            date: {
              type: "date"
            }
          }
        }
      }
    }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "date",
    filterable: {
      ui: function(element) {
        element.kendoDateTimePicker(); // initialize a Kendo UI DateTimePicker
      }
    }
  } ],
    filterable: true,
    dataSource: {
      data:[ { date: new Date() }, { date: new Date() } ],
      schema: {
        model: {
          fields: {
            date: {
              type: "date"
            }
          }
        }
      }
    }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    filterable: {
      extra: false,
      ui: function(element) {
        $(element).replaceWith("<textarea data-bind='value:filters[0].value'></textarea>"); // Replace the input element with an HTML textarea
      }
    }
  } ],
    filterable: true,
    dataSource: [ { name: "John" }, { name: "Mark" }, { name: "Tom" } ]
});
</script>

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [ "name", {
      field: "employed",
      filterable:{
        ui: function(element){
          element.kendoDropDownList({
            dataSource: [{ value: true, text: "True" }, { value: false, text: "False" }],
            optionLabel: "--Select--",
            dataTextField: "text",
            dataValueField: "value"
          });
        }
      }
    } ],
    filterable: true,
    dataSource: {
      data:[{ name: "John Doe" , employed: true }, { name: "Jane Doe", employed: true }, { name: "Tim Doe", employed: false} ],
      schema:{
        model:{
          fields:{
            employed: { type: "boolean" } // defining the field provides filterable.extra false out of the box for the column
          }
        }
      }
    }
  });
</script>

Check Filter menu customization for a live demo.

Related Members