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

menu `boolean`

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