\Kendo\UI\Timeline

A PHP wrapper for Kendo UI Timeline.

Inherits from \Kendo\UI\Widget.

Usage

To use Timeline in a PHP page instantiate a new instance, configure it via the available configuration methods and output it by echo-ing the result of the render method.

Using Kendo Timeline

<?php
// Create a new instance of Timeline and specify its id
$timeline = new \Kendo\UI\Timeline('Timeline');

// Configure it
$timeline->alternatingMode(true)

// Output it

echo $timeline->render();
?>

Methods

actionClick

Fires when an action for an event is clicked. For additional information check the actionClick event documentation.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->actionClick('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onActionClick(e) {
        // handle the actionClick event.
    }
</script>
<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->actionClick('onActionClick');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->actionClick(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

alternatingMode

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.

Returns

\Kendo\UI\Timeline

Parameters

$value boolean

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->alternatingMode(true);
?>

autoBind

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.

Returns

\Kendo\UI\Timeline

Parameters

$value boolean

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->autoBind(true);
?>

change

Fires when a new event is opened. For additional information check the change event documentation.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->change('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onChange(e) {
        // handle the change event.
    }
</script>
<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->change('onChange');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->change(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

collapse

Fires when an event is going to be collapsed. For additional information check the collapse event documentation.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->collapse('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onCollapse(e) {
        // handle the collapse event.
    }
</script>
<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->collapse('onCollapse');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->collapse(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

collapsibleEvents

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

Returns

\Kendo\UI\Timeline

Parameters

$value boolean

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->collapsibleEvents(true);
?>

dataActionsField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataActionsField('value');
?>

dataBound

Fires when the Timeline is bound to data. For additional information check the dataBound event documentation.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataBound('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onDataBound(e) {
        // handle the dataBound event.
    }
</script>
<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataBound('onDataBound');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataBound(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

dataDateField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataDateField('value');
?>

dataDescriptionField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataDescriptionField('value');
?>

dataImagesAltField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataImagesAltField('value');
?>

dataImagesField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataImagesField('value');
?>

dataSource

Sets the data source of the widget.

Returns

\Kendo\UI\Timeline

Parameters

$value \Kendo\Data\DataSource|array

Example - using \Kendo\Data\DataSource 

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$dataSource = new \Kendo\Data\DataSource();
$timeline->dataSource($dataSource);
?>

Example - using array

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$schema = new \Kendo\Data\DataSourceSchema();
$timeline->dataSource(array('schema' => $schema));
?>

dataSubtitleField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataSubtitleField('value');
?>

dataTitleField

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dataTitleField('value');
?>

dateFormat

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

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->dateFormat('value');
?>

eventHeight

Sets specific height for the event in horizontal mode.

Returns

\Kendo\UI\Timeline

Parameters

$value float

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->eventHeight(1);
?>

eventTemplate

Specifies the template used to render the event details.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->eventTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->eventTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

eventWidth

Sets specific width for the event in vertical mode.

Returns

\Kendo\UI\Timeline

Parameters

$value float

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->eventWidth(1);
?>

expand

Fires when an event is going to be expanded. For additional information check the expand event documentation.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->expand('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onExpand(e) {
        // handle the expand event.
    }
</script>
<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->expand('onExpand');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->expand(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

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

Returns

\Kendo\UI\Timeline

Parameters

$value boolean

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->navigatable(true);
?>

Fires when the left or right arrow is clicked. For additional information check the navigate event documentation.

Returns

\Kendo\UI\Timeline

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->navigate('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onNavigate(e) {
        // handle the navigate event.
    }
</script>
<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->navigate('onNavigate');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->navigate(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

orientation

Defines the orientation of the Timeline widget

Returns

\Kendo\UI\Timeline

Parameters

$value string

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->orientation('value');
?>

showDateLabels

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

Returns

\Kendo\UI\Timeline

Parameters

$value boolean

Example

<?php
$timeline = new \Kendo\UI\Timeline('Timeline');
$timeline->showDateLabels(true);
?>
In this article
Related articles
Not finding the help you need?