\Kendo\UI\DropDownList

A PHP wrapper for Kendo UI DropDownList.

Inherits from \Kendo\UI\Widget.

Usage

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

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

// Configure it
$dropDownList->adaptiveMode('value')

// Output it

echo $dropDownList->render();
?>

Methods

adaptiveMode

Specifies the adaptive rendering of the component. The supported values are: none (default), auto.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->adaptiveMode('value');
?>

animation

Configures the opening and closing animations of the suggestion popup. Setting the animation option to false will disable the opening and closing animations. As a result the suggestion popup will open and close instantly. is not a valid configuration.

Returns

\Kendo\UI\DropDownList

Parameters

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

Example - using boolean

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

Example - using \Kendo\UI\DropDownListAnimation

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$animation = new \Kendo\UI\DropDownListAnimation();
$close = new \Kendo\UI\DropDownListAnimationClose();
$animation->close($close);
$dropDownList->animation($animation);
?>

Example - using array

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$close = new \Kendo\UI\DropDownListAnimationClose();
$dropDownList->animation(array('close' => $close));
?>

autoBind

Controls whether to bind the widget to the data source on initialization.

Returns

\Kendo\UI\DropDownList

Parameters

$value boolean

Example

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

autoWidth

If set to true, the widget automatically adjusts the width of the popup element and does not wrap up the item label.

Returns

\Kendo\UI\DropDownList

Parameters

$value boolean

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->autoWidth(true);
?>

cascade

Fired when the value of the widget is changed via API or user interaction. For additional information check the cascade event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->cascade('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onCascade(e) {
        // handle the cascade event.
    }
</script>
<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->cascade('onCascade');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->cascade(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

cascadeFrom

Use it to set the Id of the parent DropDownList widget.Help topic showing how cascading functionality works

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->cascadeFrom('value');
?>

cascadeFromField

Defines the field to be used to filter the data source. If not defined the parent's dataValueField option will be used.Help topic showing how cascading functionality works

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->cascadeFromField('value');
?>

cascadeFromParentField

Defines the parent field to be used to retain value from. This value will be used further to filter the dataSource. If not defined the value from the parent's dataValueField will be used.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->cascadeFromParentField('value');
?>

change

Fired when the value of the widget is changed by the user. As of 2015 Q3 SP1 cascading widget will trigger change event when its value is changed due to parent update.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the change event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

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

Example - using string which defines a JavaScript name

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

Example - using \Kendo\JavaScriptFunction

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

close

Fired when the popup of the widget is closed.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the close event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->close('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onClose(e) {
        // handle the close event.
    }
</script>
<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->close('onClose');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->close(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

dataBound

Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the dataBound event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

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

Example - using string which defines a JavaScript name

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

Example - using \Kendo\JavaScriptFunction

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

dataSource

Sets the data source of the widget.

Returns

\Kendo\UI\DropDownList

Parameters

$value \Kendo\Data\DataSource|array

Example - using \Kendo\Data\DataSource

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

Example - using array

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

dataTextField

The field of the data item that provides the text content of the list items. The widget will filter the data source based on this field.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

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

dataValueField

The field of the data item that provides the value of the widget.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->dataValueField('value');
?>

delay

Specifies the delay in milliseconds before the search-text typed by the end user is sent for filtering.

Returns

\Kendo\UI\DropDownList

Parameters

$value float

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->delay(1);
?>

enable

If set to false the widget will be disabled and will not allow user input. The widget is enabled by default and allows user input.

Returns

\Kendo\UI\DropDownList

Parameters

$value boolean

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->enable(true);
?>

enforceMinLength

If set to true the widget will not show all items when the text of the search input cleared. By default the widget shows all items when the text of the search input is cleared. Works in conjunction with minLength.

Returns

\Kendo\UI\DropDownList

Parameters

$value boolean

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->enforceMinLength(true);
?>

fillMode

Sets a value controlling how the color is applied. Can also be set to the following string values: "none"; "solid"; "flat" or "outline".

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->fillMode('value');
?>

filter

The filtering method used to determine the suggestions for the current value. Filtration is turned off by default, and can be performed over string values only (either the widget's data has to be an array of strings, or over the field, configured in the dataTextField option). The supported filter values are startswith, endswith and contains.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->filter('value');
?>

filterTitle

When filtering is enabled, allows custom title to be defined for the filter input element.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->filterTitle('value');
?>

filtering

Fired when the widget is about to filter the data source.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the filtering event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->filtering('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onFiltering(e) {
        // handle the filtering event.
    }
</script>
<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->filtering('onFiltering');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->filtering(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

fixedGroupTemplate

The template used to render the fixed header group. By default the widget displays only the value of the current group.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->fixedGroupTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->fixedGroupTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

footerTemplate

The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->footerTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->footerTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

groupTemplate

The template used to render the groups. By default the widget displays only the value of the group.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->groupTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->groupTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

headerTemplate

Specifies a static HTML content, which will be rendered as a header of the popup element.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->headerTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->headerTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

height

The height of the suggestion popup in pixels. The default value is 200 pixels.

Returns

\Kendo\UI\DropDownList

Parameters

$value float

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->height(1);
?>

ignoreCase

If set to false case-sensitive search will be performed to find suggestions. The widget performs case-insensitive searching by default.

Returns

\Kendo\UI\DropDownList

Parameters

$value boolean

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->ignoreCase(true);
?>

index

The index of the initially selected item. The index is 0 based.

Returns

\Kendo\UI\DropDownList

Parameters

$value float

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->index(1);
?>

label

Adds a label before the input. If the input has no id attribute, a generated id will be assigned. The string and the function parameters are setting the inner HTML of the label.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction|\Kendo\UI\DropDownListLabel|array

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->label('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->label(new \Kendo\JavaScriptFunction('function() { }'));
?>

Example - using \Kendo\UI\DropDownListLabel

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$label = new \Kendo\UI\DropDownListLabel();
$content = 'value';
$label->content($content);
$dropDownList->label($label);
?>

Example - using array

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$content = 'value';
$dropDownList->label(array('content' => $content));
?>

messages

The text messages displayed in the widget. Use this option to customize or localize the messages.

Returns

\Kendo\UI\DropDownList

Parameters

$value \Kendo\UI\DropDownListMessages|array

Example - using \Kendo\UI\DropDownListMessages

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$messages = new \Kendo\UI\DropDownListMessages();
$noData = 'value';
$messages->noData($noData);
$dropDownList->messages($messages);
?>

Example - using array

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$noData = 'value';
$dropDownList->messages(array('noData' => $noData));
?>

minLength

The minimum number of characters the user must type before a filter is performed. Set to higher value than 1 if the search could match a lot of items.

Returns

\Kendo\UI\DropDownList

Parameters

$value float

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->minLength(1);
?>

noDataTemplate

The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction|boolean

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->noDataTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->noDataTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

Example - using boolean

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->noDataTemplate(true);
?>

open

Fired when the popup of the widget is opened by the user.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the open event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->open('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onOpen(e) {
        // handle the open event.
    }
</script>
<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->open('onOpen');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->open(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

optionLabel

Define the text of the default empty item. If the value is an object, then the widget will use it as a valid data item. Note that the optionLabel will not be available if the widget is empty.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->optionLabel('value');
?>

optionLabelTemplate

The template used to render the option label. Use optionLabelTemplate if you want to customize the markup of the optionLabel.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->optionLabelTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->optionLabelTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

The options that will be used for the popup initialization. For more details about the available options refer to Popup documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value \Kendo\UI\DropDownListPopup|array

Example - using \Kendo\UI\DropDownListPopup

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$popup = new \Kendo\UI\DropDownListPopup();
$appendTo = 'value';
$popup->appendTo($appendTo);
$dropDownList->popup($popup);
?>

Example - using array

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$appendTo = 'value';
$dropDownList->popup(array('appendTo' => $appendTo));
?>

rounded

Sets a value controlling the border radius. Can also be set to the following string values: "none"; "small"; "medium"; "large" or "full".

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->rounded('value');
?>

select

Fired when an item from the popup is selected by the user either with mouse/tap or with keyboard navigation. For additional information check the select event documentation.

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

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

Example - using string which defines a JavaScript name

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

Example - using \Kendo\JavaScriptFunction

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

size

Sets a value controlling size of the component. Can also be set to the following string values: "small"; "medium"; "large" or "none".

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->size('value');
?>

template

The template used to render the items. By default the widget displays only the text of the data item (configured via dataTextField).

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->template('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->template(new \Kendo\JavaScriptFunction('function() { }'));
?>

text

The text of the widget used when the autoBind is set to false.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->text('value');
?>

value

The value of the widget.

Returns

\Kendo\UI\DropDownList

Parameters

$value string

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->value('value');
?>

valuePrimitive

Specifies the value binding behavior for the widget when the initial model value is null. If set to true, the View-Model field will be updated with the primitive value of the selected item's field (defined in the dataValueField option).if set to false, the View-Model field will be updated with the selected item - the entire non-primitive object.

Returns

\Kendo\UI\DropDownList

Parameters

$value boolean

Example

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->valuePrimitive(true);
?>

valueTemplate

The valueTemplate used to render the selected value. By default the widget displays only the text of the data item (configured via dataTextField).

Returns

\Kendo\UI\DropDownList

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->valueTemplate('value');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->valueTemplate(new \Kendo\JavaScriptFunction('function() { }'));
?>

virtual

Enables the virtualization feature of the widget. The configuration can be set on an object, which contains two properties - itemHeight and valueMapper.For detailed information, refer to the article on virtualization.

Returns

\Kendo\UI\DropDownList

Parameters

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

Example - using boolean

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$dropDownList->virtual(true);
?>

Example - using \Kendo\UI\DropDownListVirtual

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$virtual = new \Kendo\UI\DropDownListVirtual();
$itemHeight = 1;
$virtual->itemHeight($itemHeight);
$dropDownList->virtual($virtual);
?>

Example - using array

<?php
$dropDownList = new \Kendo\UI\DropDownList('DropDownList');
$itemHeight = 1;
$dropDownList->virtual(array('itemHeight' => $itemHeight));
?>
In this article
Not finding the help you need?