Timeline

Example

Razor

<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.
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.
as-module	Boolean
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
script-attributes	IDictionary<String,Object>
show-date-labels	Boolean	If set to false, the event's date label will be hidden.