Edit this page

columns.filterable.cell.template Function

JavaScript function which will customize how the input for the filter value is rendered. The function receives an object argument with two fields:

  • element - the default input inside the filter cell;
  • dataSource - a Kendo UI DataSource instance, which has the same settings as the Grid dataSource, but will only contain data items with unique values for the current column. This instance is also used by the default AutoComplete widget, which is used inside the filter cell if no template is set. Keep in mind that the passed dataSource instance may still not be populated at the time the template function is called, if the Grid uses remote binding.

Example - Using template for the filter cell

<div id="grid"></div>
<script>
      $("#grid").kendoGrid({
          columns: [
            {
                field: "color",
                filterable: {
                    cell: {
                        template: function (args) {
                            // create a DropDownList of unique values (colors)
                            args.element.kendoDropDownList({
                                dataSource: args.dataSource,
                                dataTextField: "color",
                                dataValueField: "color",
                                valuePrimitive: true
                            });

                            // or

                            // create a ColorPicker
                            // args.element.kendoColorPicker();
                        },
                        showOperators: false
                    }
                }
            },
            { field: "size" } ],
        filterable: { mode: "row" },
        dataSource: [ { color: "#ff0000", size: 30 }, { color: "#000000", size: 33 }] });
</script>