Edit this page

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 and Boolean columns.

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>

Check Filter menu customization for a live demo.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy