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

Filterable

configuration

If set to true the user can filter the data source using the grid filter menu. Filtering is disabled by default.

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

filterable

Boolean|Object

Default: false

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

filterable.extra

Boolean

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

Default: true

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

filterable.messages

Object

The text messages displayed in the filter menu. Use it to customize or localize the filter menu messages.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  filterable: {
    messages: {
      and: "and",
      or: "or",
      filter: "Apply filter",
      clear: "Clear filter"
    }
  }
});
</script>

filterable.mode

String

If set to row the user would be able to filter via extra row added below the headers. By default filtering is using the menu mode.

Can also be set to the following string values:

"row" - the user can filter via extra row within the header.
"menu" - the user can filter via the menu after clicking the filter icon.
"menu, row" - the user can filter with both modes above enabled.

When the filterable.mode property is set to "row" or "menu, row", the Grid dataSource instance is copied and applied to the Kendo UI AutoComplete widgets used for string filtering.

This will cause one additional read request per string column. The AutoComplete dataSources do not perform paging and will use a collection of the unique column values only.

Default: "menu"

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

filterable.operators