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.

Example - specify the filter UI as a string

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

Example - initialize the filter UI

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

Example - use a Kendo UI DropDownList for a boolean column

<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.

In this article
Not finding the help you need? Improve this article