Timeline

Example

<kendo-timeline>
    <datasource></datasource>
    <timeline-event-template></timeline-event-template>
</kendo-timeline>

ChildTags

Tag Name Details
datasource DataSourceTagHelper
timeline-event-template TemplateTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
as-child-component Boolean
datasource-id String The Id of the data source.
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
alternating-mode 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.
auto-bind 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.
collapsible-events Boolean Enables the events in the Kendo UI Timeline to be expandable or collapsible. When enabled initially all events are collapsed.
data-actions-field String Sets the field of the data item that provides the actions information for the event.
data-date-field String Sets the field of the data item that provides information when the given event happened in time.
data-description-field String Sets the field of the data item that provides the description information for the event.
data-images-alt-field String Sets the field of the data item that provides the value for the alt attribute of the images.
data-images-field String Sets the field of the data item that provides the images information for the event.
data-subtitle-field String Sets the field of the data item that provides the subtitle information for the event.
data-title-field String Sets the field of the data item that provides the title information for the event.
date-format String Sets the date format used to display the date in the event's label
event-height Double Sets specific height for the event in horizontal mode.
event-template String Specifies the template used to render the event details.
event-template-handler String Specifies the template used to render the event details.
event-template-id String Specifies the template used to render the event details.
event-template-view IHtmlContent Specifies the template used to render the event details.
event-width Double Sets specific width for the event in vertical mode.
has-client-component Boolean
navigatable Boolean If set to true, will enable the keyboard navigation for the component.
on-action-click String Fires when an action for an event is clicked.
on-change String Fires when a new event is opened.
on-collapse String Fires when an event is going to be collapsed.
on-data-bound String Fires when the Timeline is bound to data.
on-expand String Fires when an event is going to be expanded.
on-navigate String Fires when the left or right arrow is clicked.
orientation TimelineOrientation Defines the orientation of the Timeline widget
sanitize-id Boolean
show-date-labels Boolean If set to false, the event's date label will be hidden.
In this article
Not finding the help you need?