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

element HTML Element

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

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: {
      data:[ { date: new Date() }, { date: new Date() } ],
      schema: {
        model: {
          fields: {
            date: {
              type: "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: {
      data:[ { date: new Date() }, { date: new Date() } ],
      schema: {
        model: {
          fields: {
            date: {
              type: "date"
            }
          }
        }
      }
    }
});
</script>

Example - Replace the default input with a textarea element

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

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.