<kendo:timeline>

A JSP wrapper for Kendo UI Timeline.

Configuration Attributes

alternatingMode boolean

Indicates whether events should be positioned on both sides of the timeline axis. By default all events are displayed on the right side of the timeline axis.

Example

<kendo:timeline alternatingMode="alternatingMode">
</kendo:timeline>

autoBind boolean

If set to false, the Timeline will not bind to the data source during initialization, i.e. it will not call the fetch method of the dataSource instance. In such scenarios data binding will occur when the change event of the dataSource instance is fired. By default, autoBind is set to true and the widget will bind to the data source specified in the configuration.

Example

<kendo:timeline autoBind="autoBind">
</kendo:timeline>

collapsibleEvents boolean

Enables the events in the Kendo UI Timeline to be expandable or collapsible. When enabled initially all events are collapsed.

Example

<kendo:timeline collapsibleEvents="collapsibleEvents">
</kendo:timeline>

dataActionsField java.lang.String

Sets the field of the data item that provides the actions information for the event.

Example

<kendo:timeline dataActionsField="dataActionsField">
</kendo:timeline>

dataDateField java.lang.String

Sets the field of the data item that provides information when the given event happened in time.

Example

<kendo:timeline dataDateField="dataDateField">
</kendo:timeline>

dataDescriptionField java.lang.String

Sets the field of the data item that provides the description information for the event.

Example

<kendo:timeline dataDescriptionField="dataDescriptionField">
</kendo:timeline>

dataImagesAltField java.lang.String

Sets the field of the data item that provides the value for the alt attribute of the images.

Example

<kendo:timeline dataImagesAltField="dataImagesAltField">
</kendo:timeline>

dataImagesField java.lang.String

Sets the field of the data item that provides the images information for the event.

Example

<kendo:timeline dataImagesField="dataImagesField">
</kendo:timeline>

dataSubtitleField java.lang.String

Sets the field of the data item that provides the subtitle information for the event.

Example

<kendo:timeline dataSubtitleField="dataSubtitleField">
</kendo:timeline>

dataTitleField java.lang.String

Sets the field of the data item that provides the title information for the event.

Example

<kendo:timeline dataTitleField="dataTitleField">
</kendo:timeline>

dateFormat java.lang.String

Sets the date format used to display the date in the event's label

Example

<kendo:timeline dateFormat="dateFormat">
</kendo:timeline>

eventHeight float

Sets specific height for the event in horizontal mode.

Example

<kendo:timeline eventHeight="eventHeight">
</kendo:timeline>

eventTemplate java.lang.String

Specifies the template used to render the event details.

Example

<kendo:timeline eventTemplate="eventTemplate">
</kendo:timeline>

eventWidth float

Sets specific width for the event in vertical mode.

Example

<kendo:timeline eventWidth="eventWidth">
</kendo:timeline>

If set to true, will enable the keyboard navigation for the component.

Example

<kendo:timeline navigatable="navigatable">
</kendo:timeline>

orientation java.lang.String

Defines the orientation of the Timeline widget

Example

<kendo:timeline orientation="orientation">
</kendo:timeline>

showDateLabels boolean

If set to false, the event's date label will be hidden.

Example

<kendo:timeline showDateLabels="showDateLabels">
</kendo:timeline>

Event Attributes

change String

Fires when a new event is opened.

For additional information check the change event documentation.

Example

<kendo:timeline change="handle_change">
</kendo:timeline>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

dataBound String

Fires when the Timeline is bound to data.

For additional information check the dataBound event documentation.

Example

<kendo:timeline dataBound="handle_dataBound">
</kendo:timeline>
<script>
    function handle_dataBound(e) {
        // Code to handle the dataBound event.
    }
</script>

expand String

Fires when an event is going to be expanded.

For additional information check the expand event documentation.

Example

<kendo:timeline expand="handle_expand">
</kendo:timeline>
<script>
    function handle_expand(e) {
        // Code to handle the expand event.
    }
</script>

collapse String

Fires when an event is going to be collapsed.

For additional information check the collapse event documentation.

Example

<kendo:timeline collapse="handle_collapse">
</kendo:timeline>
<script>
    function handle_collapse(e) {
        // Code to handle the collapse event.
    }
</script>

actionClick String

Fires when an action for an event is clicked.

For additional information check the actionClick event documentation.

Example

<kendo:timeline actionClick="handle_actionClick">
</kendo:timeline>
<script>
    function handle_actionClick(e) {
        // Code to handle the actionClick event.
    }
</script>

Fires when the left or right arrow is clicked.

For additional information check the navigate event documentation.

Example

<kendo:timeline navigate="handle_navigate">
</kendo:timeline>
<script>
    function handle_navigate(e) {
        // Code to handle the navigate event.
    }
</script>

Event Tags

kendo:timeline-change

Fires when a new event is opened.

For additional information check the change event documentation.

Example

<kendo:timeline>
    <kendo:timeline-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:timeline-change>
</kendo:timeline>

kendo:timeline-dataBound

Fires when the Timeline is bound to data.

For additional information check the dataBound event documentation.

Example

<kendo:timeline>
    <kendo:timeline-dataBound>
        <script>
            function(e) {
                // Code to handle the dataBound event.
            }
        </script>
    </kendo:timeline-dataBound>
</kendo:timeline>

kendo:timeline-expand

Fires when an event is going to be expanded.

For additional information check the expand event documentation.

Example

<kendo:timeline>
    <kendo:timeline-expand>
        <script>
            function(e) {
                // Code to handle the expand event.
            }
        </script>
    </kendo:timeline-expand>
</kendo:timeline>

kendo:timeline-collapse

Fires when an event is going to be collapsed.

For additional information check the collapse event documentation.

Example

<kendo:timeline>
    <kendo:timeline-collapse>
        <script>
            function(e) {
                // Code to handle the collapse event.
            }
        </script>
    </kendo:timeline-collapse>
</kendo:timeline>

kendo:timeline-actionClick

Fires when an action for an event is clicked.

For additional information check the actionClick event documentation.

Example

<kendo:timeline>
    <kendo:timeline-actionClick>
        <script>
            function(e) {
                // Code to handle the actionClick event.
            }
        </script>
    </kendo:timeline-actionClick>
</kendo:timeline>

kendo:timeline-navigate

Fires when the left or right arrow is clicked.

For additional information check the navigate event documentation.

Example

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