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

<kendo:grid-column-filterable-cell>

Specifies options for the filter header cell when filter mode is set to 'row'.Can be set to a JavaScript object which represents the filter cell configuration.

Example

<kendo:grid-column-filterable>
    <kendo:grid-column-filterable-cell></kendo:grid-column-filterable-cell>
</kendo:grid-column-filterable>

Configuration Attributes

dataTextField java.lang.String

Specifies the name of the field which will provide the text representation for the AutoComplete suggestion (when using String type column) when CustomDataSource is provided. By default the name of the field bound to the column will be used.

Example

<kendo:grid-column-filterable-cell dataTextField="dataTextField">
</kendo:grid-column-filterable-cell>

delay float

Specifies the delay of the AutoComplete widget which will provide the suggest functionality (when using String type column).

Example

<kendo:grid-column-filterable-cell delay="delay">
</kendo:grid-column-filterable-cell>

enabled boolean

When set to false the Grid will not render the cell filtering widget for that specific column.

Example

<kendo:grid-column-filterable-cell enabled="enabled">
</kendo:grid-column-filterable-cell>

inputWidth float

Specifies the width of the input before it is initialized or turned into a widget. Provides convenient way to set the width according to the column width.

Example

<kendo:grid-column-filterable-cell inputWidth="inputWidth">
</kendo:grid-column-filterable-cell>

minLength float

Specifies the minLength option of the AutoComplete widget when column is of type string.

Example

<kendo:grid-column-filterable-cell minLength="minLength">
</kendo:grid-column-filterable-cell>

operator java.lang.String

Specifies the default operator that will be used for the cell filtering.

Example

<kendo:grid-column-filterable-cell operator="operator">
</kendo:grid-column-filterable-cell>

showOperators boolean

Specifies whether to show or hide the DropDownList with the operators.

Example

<kendo:grid-column-filterable-cell showOperators="showOperators">
</kendo:grid-column-filterable-cell>

suggestionOperator java.lang.String

Specifies the AutoComplete filter option. The possible values are the same as the ones for the AutoComplete filter option - "startswith", "endswith", "contains". The "contains" operator performs a case-insensitive search. To perform a case-sensitive filtering, set a custom filtering function through the dataSource.filter.operator option.

Example

<kendo:grid-column-filterable-cell suggestionOperator="suggestionOperator">
</kendo:grid-column-filterable-cell>

template java.lang.String

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

<kendo:grid-column-filterable-cell template="template">
</kendo:grid-column-filterable-cell>

Event Attributes

template String

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

<kendo:grid-column-filterable-cell template="handle_template">
</kendo:grid-column-filterable-cell>
<script>
    function handle_template(e) {
        // Code to handle the template event.
    }
</script>

Event Tags

kendo:grid-column-filterable-cell-template

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

<kendo:grid-column-filterable-cell>
    <kendo:grid-column-filterable-cell-template>
        <script>
            function(e) {
                // Code to handle the template event.
            }
        </script>
    </kendo:grid-column-filterable-cell-template>
</kendo:grid-column-filterable-cell>
In this article