<kendo:grid-column>

The configuration of the grid columns. An array of JavaScript objects or strings. JavaScript objects are interpreted as column configurations. Strings are interpreted as thefield to which the column is bound. The grid will create a column for every item of the array.

Example

<kendo:grid-columns>
    <kendo:grid-column></kendo:grid-column>
</kendo:grid-columns>

Configuration Attributes

aggregates java.lang.Object

The aggregate(s) which are calculated when the grid is grouped by the columns field. The supported aggregates are "average", "count", "max", "min" and "sum".

Example

<kendo:grid-column aggregates="aggregates">
</kendo:grid-column>

attributes java.lang.Object

HTML attributes of the table cell (

) rendered for the column.

Example

<kendo:grid-column attributes="attributes">
</kendo:grid-column>

columnMenu boolean

If set to false the column menu will not be rendered for the specific column.

Example

<kendo:grid-column columnMenu="columnMenu">
</kendo:grid-column>

command java.lang.String

The configuration of the column command(s). If set the column would display a button for every command. Commands can be custom or built-in ("edit" or "destroy").The "edit" built-in command switches the current table row in edit mode.The "destroy" built-in command removes the data item to which the current table row is bound.Custom commands are supported by specifying the click option. Further configuration is available via kendo:grid-column-command.

Example

<kendo:grid-column command="command">
</kendo:grid-column>

dataTextField java.lang.String

The data text field of the foreign key item.

Example

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

dataValueField java.lang.String

The data value field of the foreign key item.

Example

<kendo:grid-column dataValueField="dataValueField">
</kendo:grid-column>

draggable boolean

If set to true a draghandle will be rendered and the user could reorder the rows by dragging the row via the drag handle. If the selectable option is enabled for rows only selected rows will can be dragged and reordered.

Example

<kendo:grid-column draggable="draggable">
</kendo:grid-column>

editable java.lang.String

The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.

Example

<kendo:grid-column editable="editable">
</kendo:grid-column>

editor java.lang.String

Provides a way to specify a custom editing UI for the column. Use the container parameter to create the editing UI.When used as String, defines the editor widget type. For further info check the Form API: field

Example

<kendo:grid-column editor="editor">
</kendo:grid-column>

editorOptions java.lang.Object

Defines the widget configuration when one is initialized as editor for the column (or the widget defined in items.editor). For further info check the Form API: field.

Example

<kendo:grid-column editorOptions="editorOptions">
</kendo:grid-column>

encoded boolean

If set to true the column value will be HTML-encoded before it is displayed. If set to false the column value will be displayed as is. By default the column value is HTML-encoded.

Example

<kendo:grid-column encoded="encoded">
</kendo:grid-column>

exportable boolean

If set to false the column will be excluded from the exported Excel/PDF files.Can be set to a JavaScript object which specifies whether the column should be exported per format. Further configuration is available via kendo:grid-column-exportable.

Example

<kendo:grid-column exportable="exportable">
</kendo:grid-column>

field java.lang.String

The field to which the column is bound. The value of this field is displayed in the column's cells during data binding. Only columns that are bound to a field can be sortable or filterable.The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.

Example

<kendo:grid-column field="field">
</kendo:grid-column>

filterable boolean

If set to true a filter menu will be displayed for this column when filtering is enabled. If set to false the filter menu will not be displayed. By default a filter menu is displayed for all columns when filtering is enabled via the filterable option.Can be set to a JavaScript object which represents the filter menu configuration. Further configuration is available via kendo:grid-column-filterable.

Example

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

footerAttributes java.lang.Object

HTML attributes of the column footer. The footerAttributes option can be used to set the HTML attributes of that cell.

Example

<kendo:grid-column footerAttributes="footerAttributes">
</kendo:grid-column>

footerTemplate java.lang.String

The template which renders the footer table cell for the column.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified) or data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average.

Example

<kendo:grid-column footerTemplate="footerTemplate">
</kendo:grid-column>

format java.lang.String

The format that is applied to the value before it is displayed.Takes the form "{0:format}" where "format" can be a: default number format; custom number format; default date format or custom date format.

Example

<kendo:grid-column format="format">
</kendo:grid-column>

groupFooterTemplate java.lang.String

The template which renders the group footer for the corresponding column. By default the group footer is not displayed. The group footer will always appear as long as at least one column has a defined groupFooterTemplate.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average or group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column groupFooterTemplate="groupFooterTemplate">
</kendo:grid-column>

groupHeaderColumnTemplate java.lang.String

Introduced in the Kendo UI 2018 R3 release.The template which renders the content for specific column in the group header when the grid is grouped by the column field.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average or group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column groupHeaderColumnTemplate="groupHeaderColumnTemplate">
</kendo:grid-column>

groupHeaderTemplate java.lang.String

The template which renders the group header when the grid is grouped by the column field. By default the name of the field and the current group value is displayed.The fields which can be used in the template are: value - the current group value; field - the current group field; average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); aggregates - provides access to all available aggregates, e.g. aggregates.fieldName1.sum or aggregates.fieldName2.average or items - the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column groupHeaderTemplate="groupHeaderTemplate">
</kendo:grid-column>

groupable boolean

If set to false the user will not be able to group the grid by this column (requires Grid groupable property to be enabled). By default all columns are groupable. Further configuration is available via kendo:grid-column-groupable.

Example

<kendo:grid-column groupable="groupable">
</kendo:grid-column>

headerAttributes java.lang.Object

HTML attributes of the column header. The grid renders a table header cell (

) for every column. The headerAttributes option can be used to set the HTML attributes of that th.

Example

<kendo:grid-column headerAttributes="headerAttributes">
</kendo:grid-column>

headerTemplate java.lang.String

The template which renders the column header content. By default the value of the title column option is displayed in the column header cell.

Example

<kendo:grid-column headerTemplate="headerTemplate">
</kendo:grid-column>

hidden boolean

If set to true the column will not be displayed in the grid. By default all columns are displayed.

Example

<kendo:grid-column hidden="hidden">
</kendo:grid-column>

hideOnGroup boolean

If set to true the column will be hidden when the grid is groupd via user iteraction. The column will be displayed again if iteraction to ungroup by it is performed.

Example

<kendo:grid-column hideOnGroup="hideOnGroup">
</kendo:grid-column>

lockable boolean

If set to false the column will remain in the side of the grid into which its own locked configuration placed it.

Example

<kendo:grid-column lockable="lockable">
</kendo:grid-column>

locked boolean

If set to true the column will be displayed as locked (frozen) in the grid. Also see Locked Columns help section for additional information.

Example

<kendo:grid-column locked="locked">
</kendo:grid-column>

media java.lang.String

Sets the condition that needs to be satisfied for a column to remain visible. The property accepts valid strings for the matchMedia browser API (assuming it is supported by the browser) and toggles the visibility of the columns based on the media queries.The hidden option takes precedence over media. This option cannot be used with minScreenWidth at the same time.Also accepts the device identifiers that are available in Bootstrap 4: xs is equivalent to "(max-width: 576px)"; sm is equivalent to "(min-width: 576px)"; md is equivalent to "(min-width: 768px)"; lg is equivalent to "(min-width: 992px)" or xl is equivalent to "(min-width: 1200px)".

Example

<kendo:grid-column media="media">
</kendo:grid-column>

If set to true the column will be visible in the grid column menu. By default the column menu includes all data-bound columns (ones that have their field set).

Example

<kendo:grid-column menu="menu">
</kendo:grid-column>

minResizableWidth float

The pixel screen width below which the user will not be able to resize the column via the UI.

Example

<kendo:grid-column minResizableWidth="minResizableWidth">
</kendo:grid-column>

minScreenWidth float

The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting, so the two should not be used at the same time.

Example

<kendo:grid-column minScreenWidth="minScreenWidth">
</kendo:grid-column>

resizable boolean

If set to false the column will become non-resizable, while all the other columns remaining resizable in the the grid component. In order for this property to work, grid's resizable property must be set to true

Example

<kendo:grid-column resizable="resizable">
</kendo:grid-column>

selectable boolean

If set to true the grid will render a select column with checkboxes in each cell, thus enabling multi-row selection. The header checkbox allows users to select/deselect all the rows on the current page. The change event is fired when a row is selected.More about the Grid Selection feature you can find in this documentation article.

Example

<kendo:grid-column selectable="selectable">
</kendo:grid-column>

sortable boolean

If set to true the user can click the column header and sort the grid by the column field when sorting is enabled. If set to false sorting will be disabled for this column. By default all columns are sortable if sorting is enabled via the sortable option. Further configuration is available via kendo:grid-column-sortable.

Example

<kendo:grid-column sortable="sortable">
</kendo:grid-column>

stickable boolean

If set to true the user will be able to stick or unstick the column from the column menu.

Example

<kendo:grid-column stickable="stickable">
</kendo:grid-column>

sticky boolean

If set to true the column will be displayed as sticky in the grid. Also see Sticky Columns help section for additional information.

Example

<kendo:grid-column sticky="sticky">
</kendo:grid-column>

template java.lang.String

The template which renders the column content. The grid renders table rows (

) which represent the data source items. Each table row consists of table cells () which represent the grid columns. By default the HTML-encoded value of the field is displayed in the column.For additional and more complex examples that utilize column templates, visit the Knowledge Base documentation, and use the following search terms: column template; grid column template or Column Template | Kendo UI Grid.

Example

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

title java.lang.String

The text that is displayed in the column header cell. If not set the field is used.

Example

<kendo:grid-column title="title">
</kendo:grid-column>

width java.lang.Object

The width of the column. Numeric values are treated as pixels. The width option supports the fundamental measuring units. For instance: px sets the width in pixels; cm sets the width in centimeters; mm sets the width in millimeters; % sets the width relative to the grid's element width; em sets the width relative to the font-size of the grid's element width or rem sets the width relative to font-size of the root element. For more important information, please refer to Column Widths.Grid options, including column widths, can be set programmatically after Grid initialization with the setOptions method.

Example

<kendo:grid-column width="width">
</kendo:grid-column>

Configuration JSP Tags

kendo:grid-column-command

The configuration of the column command(s). If set the column would display a button for every command. Commands can be custom or built-in ("edit" or "destroy").The "edit" built-in command switches the current table row in edit mode.The "destroy" built-in command removes the data item to which the current table row is bound.Custom commands are supported by specifying the click option.

More documentation is available at kendo:grid-column-command.

Example

<kendo:grid-column>
    <kendo:grid-column-command></kendo:grid-column-command>
</kendo:grid-column>

kendo:grid-column-exportable

If set to false the column will be excluded from the exported Excel/PDF files.Can be set to a JavaScript object which specifies whether the column should be exported per format.

More documentation is available at kendo:grid-column-exportable.

Example

<kendo:grid-column>
    <kendo:grid-column-exportable></kendo:grid-column-exportable>
</kendo:grid-column>

kendo:grid-column-filterable

If set to true a filter menu will be displayed for this column when filtering is enabled. If set to false the filter menu will not be displayed. By default a filter menu is displayed for all columns when filtering is enabled via the filterable option.Can be set to a JavaScript object which represents the filter menu configuration.

More documentation is available at kendo:grid-column-filterable.

Example

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

kendo:grid-column-groupable

If set to false the user will not be able to group the grid by this column (requires Grid groupable property to be enabled). By default all columns are groupable.

More documentation is available at kendo:grid-column-groupable.

Example

<kendo:grid-column>
    <kendo:grid-column-groupable></kendo:grid-column-groupable>
</kendo:grid-column>

kendo:grid-column-sortable

If set to true the user can click the column header and sort the grid by the column field when sorting is enabled. If set to false sorting will be disabled for this column. By default all columns are sortable if sorting is enabled via the sortable option.

More documentation is available at kendo:grid-column-sortable.

Example

<kendo:grid-column>
    <kendo:grid-column-sortable></kendo:grid-column-sortable>
</kendo:grid-column>

Event Attributes

attributes String

HTML attributes of the table cell (

) rendered for the column.

Example

<kendo:grid-column attributes="handle_attributes">
</kendo:grid-column>
<script>
    function handle_attributes(e) {
        // Code to handle the attributes event.
    }
</script>

editable String

The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.

Example

<kendo:grid-column editable="handle_editable">
</kendo:grid-column>
<script>
    function handle_editable(e) {
        // Code to handle the editable event.
    }
</script>

editor String

Provides a way to specify a custom editing UI for the column. Use the container parameter to create the editing UI.When used as String, defines the editor widget type. For further info check the Form API: field

Example

<kendo:grid-column editor="handle_editor">
</kendo:grid-column>
<script>
    function handle_editor(e) {
        // Code to handle the editor event.
    }
</script>

footerTemplate String

The template which renders the footer table cell for the column.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified) or data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average.

Example

<kendo:grid-column footerTemplate="handle_footerTemplate">
</kendo:grid-column>
<script>
    function handle_footerTemplate(e) {
        // Code to handle the footerTemplate event.
    }
</script>

groupHeaderColumnTemplate String

Introduced in the Kendo UI 2018 R3 release.The template which renders the content for specific column in the group header when the grid is grouped by the column field.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average or group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column groupHeaderColumnTemplate="handle_groupHeaderColumnTemplate">
</kendo:grid-column>
<script>
    function handle_groupHeaderColumnTemplate(e) {
        // Code to handle the groupHeaderColumnTemplate event.
    }
</script>

groupHeaderTemplate String

The template which renders the group header when the grid is grouped by the column field. By default the name of the field and the current group value is displayed.The fields which can be used in the template are: value - the current group value; field - the current group field; average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); aggregates - provides access to all available aggregates, e.g. aggregates.fieldName1.sum or aggregates.fieldName2.average or items - the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column groupHeaderTemplate="handle_groupHeaderTemplate">
</kendo:grid-column>
<script>
    function handle_groupHeaderTemplate(e) {
        // Code to handle the groupHeaderTemplate event.
    }
</script>

groupFooterTemplate String

The template which renders the group footer for the corresponding column. By default the group footer is not displayed. The group footer will always appear as long as at least one column has a defined groupFooterTemplate.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average or group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column groupFooterTemplate="handle_groupFooterTemplate">
</kendo:grid-column>
<script>
    function handle_groupFooterTemplate(e) {
        // Code to handle the groupFooterTemplate event.
    }
</script>

headerTemplate String

The template which renders the column header content. By default the value of the title column option is displayed in the column header cell.

Example

<kendo:grid-column headerTemplate="handle_headerTemplate">
</kendo:grid-column>
<script>
    function handle_headerTemplate(e) {
        // Code to handle the headerTemplate event.
    }
</script>

template String

The template which renders the column content. The grid renders table rows (

) which represent the data source items. Each table row consists of table cells () which represent the grid columns. By default the HTML-encoded value of the field is displayed in the column.For additional and more complex examples that utilize column templates, visit the Knowledge Base documentation, and use the following search terms: column template; grid column template or Column Template | Kendo UI Grid.

Example

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

Event Tags

kendo:grid-column-attributes

HTML attributes of the table cell (

) rendered for the column.

Example

<kendo:grid-column>
    <kendo:grid-column-attributes>
        <script>
            function(e) {
                // Code to handle the attributes event.
            }
        </script>
    </kendo:grid-column-attributes>
</kendo:grid-column>

kendo:grid-column-editable

The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.

Example

<kendo:grid-column>
    <kendo:grid-column-editable>
        <script>
            function(e) {
                // Code to handle the editable event.
            }
        </script>
    </kendo:grid-column-editable>
</kendo:grid-column>

kendo:grid-column-editor

Provides a way to specify a custom editing UI for the column. Use the container parameter to create the editing UI.When used as String, defines the editor widget type. For further info check the Form API: field

Example

<kendo:grid-column>
    <kendo:grid-column-editor>
        <script>
            function(e) {
                // Code to handle the editor event.
            }
        </script>
    </kendo:grid-column-editor>
</kendo:grid-column>

kendo:grid-column-footerTemplate

The template which renders the footer table cell for the column.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified) or data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average.

Example

<kendo:grid-column>
    <kendo:grid-column-footerTemplate>
        <script>
            function(e) {
                // Code to handle the footerTemplate event.
            }
        </script>
    </kendo:grid-column-footerTemplate>
</kendo:grid-column>

kendo:grid-column-groupHeaderColumnTemplate

Introduced in the Kendo UI 2018 R3 release.The template which renders the content for specific column in the group header when the grid is grouped by the column field.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average or group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column>
    <kendo:grid-column-groupHeaderColumnTemplate>
        <script>
            function(e) {
                // Code to handle the groupHeaderColumnTemplate event.
            }
        </script>
    </kendo:grid-column-groupHeaderColumnTemplate>
</kendo:grid-column>

kendo:grid-column-groupHeaderTemplate

The template which renders the group header when the grid is grouped by the column field. By default the name of the field and the current group value is displayed.The fields which can be used in the template are: value - the current group value; field - the current group field; average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); aggregates - provides access to all available aggregates, e.g. aggregates.fieldName1.sum or aggregates.fieldName2.average or items - the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column>
    <kendo:grid-column-groupHeaderTemplate>
        <script>
            function(e) {
                // Code to handle the groupHeaderTemplate event.
            }
        </script>
    </kendo:grid-column-groupHeaderTemplate>
</kendo:grid-column>

kendo:grid-column-groupFooterTemplate

The template which renders the group footer for the corresponding column. By default the group footer is not displayed. The group footer will always appear as long as at least one column has a defined groupFooterTemplate.The fields which can be used in the template are: average - the value of the "average" aggregate (if specified); count - the value of the "count" aggregate (if specified); max - the value of the "max" aggregate (if specified); min - the value of the "min" aggregate (if specified); sum - the value of the "sum" aggregate (if specified); data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average or group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups).

Example

<kendo:grid-column>
    <kendo:grid-column-groupFooterTemplate>
        <script>
            function(e) {
                // Code to handle the groupFooterTemplate event.
            }
        </script>
    </kendo:grid-column-groupFooterTemplate>
</kendo:grid-column>

kendo:grid-column-headerTemplate

The template which renders the column header content. By default the value of the title column option is displayed in the column header cell.

Example

<kendo:grid-column>
    <kendo:grid-column-headerTemplate>
        <script>
            function(e) {
                // Code to handle the headerTemplate event.
            }
        </script>
    </kendo:grid-column-headerTemplate>
</kendo:grid-column>

kendo:grid-column-template

The template which renders the column content. The grid renders table rows (

) which represent the data source items. Each table row consists of table cells () which represent the grid columns. By default the HTML-encoded value of the field is displayed in the column.For additional and more complex examples that utilize column templates, visit the Knowledge Base documentation, and use the following search terms: column template; grid column template or Column Template | Kendo UI Grid.

Example

<kendo:grid-column>
    <kendo:grid-column-template>
        <script>
            function(e) {
                // Code to handle the template event.
            }
        </script>
    </kendo:grid-column-template>
</kendo:grid-column>
In this article
Not finding the help you need?