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.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
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.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
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.
datasource-id	String	The Id of the data source.
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. This option expects the name of a JavaScript function that will be called to return the template.
event-template-id	String	Specifies the template used to render the event details. This option expects the ID of the script element that contains the template.
event-template-view	IHtmlContent	Specifies the template used to render the event details. This option expects the instance containing the created HTML.
event-width	Double	Sets specific width for the event in vertical mode.
navigatable	Boolean	If set to true, will enable the keyboard navigation for the component.
on-action-click	String	The name of the JavaScript function that will handle the actionClick event. Fires when an action for an event is clicked.
on-change	String	The name of the JavaScript function that will handle the change event. Fires when a new event is opened.
on-collapse	String	The name of the JavaScript function that will handle the collapse event. Fires when an event is going to be collapsed.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Fires when the Timeline is bound to data.
on-expand	String	The name of the JavaScript function that will handle the expand event. Fires when an event is going to be expanded.
on-navigate	String	The name of the JavaScript function that will handle the navigate event. Fires when the left or right arrow is clicked.
orientation	TimelineOrientation	Defines the orientation of the Timeline widget
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
show-date-labels	Boolean	If set to false, the event's date label will be hidden.