<kendo:gantt-column>

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

Example

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

Configuration Attributes

attributes java.lang.Object

The HTML attributes of the table cell (

) that is rendered for the column.

Example

<kendo:gantt-column attributes="attributes">
</kendo:gantt-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.

Example

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

editable boolean

Specifies whether this column can be edited by the user.

Example

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

editor java.lang.String

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.

Example

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

expandable boolean

If set to true, the column will show the icons that are used for expanding and collapsing child rows. By default, the "title" column of the Gantt is expandable.

Example

<kendo:gantt-column expandable="expandable">
</kendo:gantt-column>

field java.lang.String

The field to which the column is bound. The value of this field is displayed by the column during data binding.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:gantt-column field="field">
</kendo:gantt-column>

filterable boolean

If set to true and if filtering is enabled for the entire Gantt, a filter menu will be displayed for this column. 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 through the filterable option. Can be set to a JavaScript object which represents the filter menu configuration. Further configuration is available via kendo:gantt-column-filterable.

Example

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

format java.lang.String

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

Example

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

headerAttributes java.lang.Object

The HTML attributes of the table header cell (

) that is rendered for the column.

Example

<kendo:gantt-column headerAttributes="headerAttributes">
</kendo:gantt-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:gantt-column headerTemplate="headerTemplate">
</kendo:gantt-column>

hidden boolean

If set to true, the Gantt will not display the column. By default, all columns are displayed.

Example

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

If set to true, the Gantt will display the column in the column menu. By default, the column menu includes all data-bound columns, that is, the ones with a set field option.

Example

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

minScreenWidth float

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

Example

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

sortable boolean

If set to true the user could sort this column by clicking its header cells. By default sorting is disabled. Further configuration is available via kendo:gantt-column-sortable.

Example

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

template java.lang.String

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

) which represent the data source items. Each table row consists of table cells () which represent the GanttList columns. By default, the HTML-encoded value of the field is displayed in the column.

Example

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

title java.lang.String

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

Example

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

width java.lang.Object

The width of the column. Numeric values are treated as pixels.

Example

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

Configuration JSP Tags

kendo:gantt-column-filterable

If set to true and if filtering is enabled for the entire Gantt, a filter menu will be displayed for this column. 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 through the filterable option. Can be set to a JavaScript object which represents the filter menu configuration.

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

Example

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

kendo:gantt-column-sortable

If set to true the user could sort this column by clicking its header cells. By default sorting is disabled.

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

Example

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

Event Attributes

editor String

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.

Example

<kendo:gantt-column editor="handle_editor">
</kendo:gantt-column>
<script>
    function handle_editor(e) {
        // Code to handle the editor 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:gantt-column headerTemplate="handle_headerTemplate">
</kendo:gantt-column>
<script>
    function handle_headerTemplate(e) {
        // Code to handle the headerTemplate event.
    }
</script>

template String

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

) which represent the data source items. Each table row consists of table cells () which represent the GanttList columns. By default, the HTML-encoded value of the field is displayed in the column.

Example

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

Event Tags

kendo:gantt-column-editor

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.

Example

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

kendo:gantt-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:gantt-column>
    <kendo:gantt-column-headerTemplate>
        <script>
            function(e) {
                // Code to handle the headerTemplate event.
            }
        </script>
    </kendo:gantt-column-headerTemplate>
</kendo:gantt-column>

kendo:gantt-column-template

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

) which represent the data source items. Each table row consists of table cells () which represent the GanttList columns. By default, the HTML-encoded value of the field is displayed in the column.

Example

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