\Kendo\UI\TabStrip

A PHP wrapper for Kendo UI TabStrip.

Inherits from \Kendo\UI\Widget.

Usage

To use TabStrip 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 TabStrip

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

// Configure it
$tabStrip->animation(true)

// Output it

echo $tabStrip->render();
?>

Methods

activate

Triggered after a tab is being made visible and its animation complete. Before Q2 2014 this event was invoked after tab show, but before the end of the animation. This event is triggered only for tabs with associated content. For additional information check the activate event documentation.

Returns

\Kendo\UI\TabStrip

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->activate('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onActivate(e) {
        // handle the activate event.
    }
</script>
<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->activate('onActivate');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->activate(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

animation

A collection of visual animations used when TabStrip tab are selected through user interactions. Setting this option to false will disable all animations. is not a valid configuration.

Returns

\Kendo\UI\TabStrip

Parameters

$value boolean|\Kendo\UI\TabStripAnimation|array

Example - using boolean

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->animation(true);
?>

Example - using \Kendo\UI\TabStripAnimation 

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$animation = new \Kendo\UI\TabStripAnimation();
$close = new \Kendo\UI\TabStripAnimationClose();
$animation->close($close);
$tabStrip->animation($animation);
?>

Example - using array

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$close = new \Kendo\UI\TabStripAnimationClose();
$tabStrip->animation(array('close' => $close));
?>

collapsible

Specifies whether the TabStrip should be able to collapse completely when clicking an expanded tab.

Returns

\Kendo\UI\TabStrip

Parameters

$value boolean

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->collapsible(true);
?>

contentLoad

Triggered when content is fetched from an AJAX request. For additional information check the contentLoad event documentation.

Returns

\Kendo\UI\TabStrip

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->contentLoad('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onContentLoad(e) {
        // handle the contentLoad event.
    }
</script>
<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->contentLoad('onContentLoad');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->contentLoad(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

contentUrls

Sets an array with the URLs from which the tabs content to be loaded from. If only specific tabs should be loaded via Ajax, then you should set the URLs to the corresponding positions in the array and set the other elements to null.

Returns

\Kendo\UI\TabStrip

Parameters

$value array

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->contentUrls(array());
?>

dataContentField

Sets the field of the data item that provides the text content of the tab content element.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->dataContentField('value');
?>

dataContentUrlField

Sets the field of the data item that provides the URL for the Ajax loaded tab content.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->dataContentUrlField('value');
?>

dataImageUrlField

Sets the field of the data item that provides the image URL of the tab.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->dataImageUrlField('value');
?>

dataSource

Sets the data source of the widget.

Returns

\Kendo\UI\TabStrip

Parameters

$value \Kendo\Data\DataSource|array

Example - using \Kendo\Data\DataSource 

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

Example - using array

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

dataSpriteCssClass

Sets the field of the data item that provides the CSS class of the tab.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->dataSpriteCssClass('value');
?>

dataTextField

Sets the field of the data item that provides the text name of the tab.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->dataTextField('value');
?>

dataUrlField

Sets the field of the data item that provides the link URL for the tab.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->dataUrlField('value');
?>

error

Triggered when an AJAX request results in an error. For additional information check the error event documentation.

Returns

\Kendo\UI\TabStrip

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->error('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onError(e) {
        // handle the error event.
    }
</script>
<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->error('onError');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->error(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

addItem

Adds one or more TabStripItem to the TabStrip.

Returns

\Kendo\UI\TabStrip

Parameters

$value[, $value2, ...] \Kendo\UI\TabStripItem|array

Example - using \Kendo\UI\TabStripItem

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$item = new \Kendo\UI\TabStripItem();
$contentUrl = 'value';
$item->contentUrl($contentUrl);
$tabStrip->addItem($item);
?>

Example - using array

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$contentUrl = 'value';
$tabStrip->addItem(array('contentUrl' => $contentUrl));
?>

Example - adding more than one TabStripItem

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$first  = new \Kendo\UI\TabStripItem();
$second = new \Kendo\UI\TabStripItem();
$tabStrip->addItem($first, $second);
?>

Specifies whether the TabStrip should be keyboard navigatable.

Returns

\Kendo\UI\TabStrip

Parameters

$value boolean

Example

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

scrollable

If enabled, the TabStrip will display buttons that will scroll the tabs horizontally, when they cannot fit the TabStrip width. By default scrolling is enabled.The feature requires "top" or "bottom" tabPosition.Unless disabled, scrollable must be set to a JavaScript object, which represents the scrolling configuration.See Scrollable Tabs for more information.

Returns

\Kendo\UI\TabStrip

Parameters

$value boolean|\Kendo\UI\TabStripScrollable|array

Example - using boolean

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->scrollable(true);
?>

Example - using \Kendo\UI\TabStripScrollable 

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$scrollable = new \Kendo\UI\TabStripScrollable();
$distance = 1;
$scrollable->distance($distance);
$tabStrip->scrollable($scrollable);
?>

Example - using array

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$distance = 1;
$tabStrip->scrollable(array('distance' => $distance));
?>

select

Triggered before a tab is selected. For additional information check the select event documentation.

Returns

\Kendo\UI\TabStrip

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->select('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onSelect(e) {
        // handle the select event.
    }
</script>
<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->select('onSelect');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->select(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

show

Triggered just after a tab is being made visible, but before the end of the animation. Before Q2 2014 this event was called activate. For additional information check the show event documentation.

Returns

\Kendo\UI\TabStrip

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->show('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onShow(e) {
        // handle the show event.
    }
</script>
<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->show('onShow');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->show(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

sortable

If enabled, users will be able to sort the tabs by dragging them to the desired position.

Returns

\Kendo\UI\TabStrip

Parameters

$value boolean

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->sortable(true);
?>

tabPosition

Specifies the position of the widget tabs. Valid values are "top" (default), "left", "right" and "bottom". A fade animation is highly recommended with any of the non-default tab position settings.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->tabPosition('value');
?>

value

Specifies the selected tab. Should be corresponding to the dataTextField configuration and used when bound to a DataSource component.

Returns

\Kendo\UI\TabStrip

Parameters

$value string

Example

<?php
$tabStrip = new \Kendo\UI\TabStrip('TabStrip');
$tabStrip->value('value');
?>
In this article
Related articles
Not finding the help you need?