\Kendo\UI\ListView

A PHP wrapper for Kendo UI ListView.

Inherits from \Kendo\UI\Widget.

Usage

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

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

// Configure it
$listView->ariaLabel('value')

// Output it

echo $listView->render();
?>

Methods

altTemplate

Template to be used for rendering the alternate items in the listview.

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->altTemplate('value');
?>

ariaLabel

Sets an aria-label attribute on the ListView content element (the element with role listbox or list).

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->ariaLabel('value');
?>

autoBind

If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.

Returns

\Kendo\UI\ListView

Parameters

$value boolean

Example

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

bordered

Renders border around the listview element.

Returns

\Kendo\UI\ListView

Parameters

$value boolean

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->bordered(true);
?>

borders

Renders border around the listview items. Valid values are: all: renders borders around listview items.; horizontal: renders top border of listview items. Useful when setting layout: "flex" and flex.direction: column. or vertical: renders top border of listview items. Useful when setting layout: "flex" and flex.direction: row..

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->borders('value');
?>

cancel

Fired when the user clicks the "cancel" button.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the cancel event documentation.

Returns

\Kendo\UI\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->cancel('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onCancel(e) {
        // handle the cancel event.
    }
</script>
<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->cancel('onCancel');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->cancel(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

change

Fires when the ListView selection has changed.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\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

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

Example - using string which defines a JavaScript name

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

Example - using \Kendo\JavaScriptFunction

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

contentElement

Defines the type of element that holds the listview content.

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->contentElement('value');
?>

dataBinding

Fires when the ListView is about to be bound.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the dataBinding event documentation.

Returns

\Kendo\UI\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->dataBinding('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onDataBinding(e) {
        // handle the dataBinding event.
    }
</script>
<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->dataBinding('onDataBinding');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->dataBinding(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

dataBound

Fires when the ListView has received data from the DataSource and it is already rendered.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\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

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

Example - using string which defines a JavaScript name

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

Example - using \Kendo\JavaScriptFunction

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

dataSource

Sets the data source of the widget.

Returns

\Kendo\UI\ListView

Parameters

$value \Kendo\Data\DataSource|array

Example - using \Kendo\Data\DataSource

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

Example - using array

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

edit

Fires when the ListView enters edit mode.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the edit event documentation.

Returns

\Kendo\UI\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->edit('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onEdit(e) {
        // handle the edit event.
    }
</script>
<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->edit('onEdit');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->edit(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

editTemplate

Specifies ListView item template in edit mode.

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->editTemplate('value');
?>

flex

Flex layout settings

Returns

\Kendo\UI\ListView

Parameters

$value \Kendo\UI\ListViewFlex|array

Example - using \Kendo\UI\ListViewFlex

<?php
$listView = new \Kendo\UI\ListView('ListView');
$flex = new \Kendo\UI\ListViewFlex();
$direction = 'value';
$flex->direction($direction);
$listView->flex($flex);
?>

Example - using array

<?php
$listView = new \Kendo\UI\ListView('ListView');
$direction = 'value';
$listView->flex(array('direction' => $direction));
?>

grid

Grid layout settings.

Returns

\Kendo\UI\ListView

Parameters

$value \Kendo\UI\ListViewGrid|array

Example - using \Kendo\UI\ListViewGrid

<?php
$listView = new \Kendo\UI\ListView('ListView');
$grid = new \Kendo\UI\ListViewGrid();
$cols = 1;
$grid->cols($cols);
$listView->grid($grid);
?>

Example - using array

<?php
$listView = new \Kendo\UI\ListView('ListView');
$cols = 1;
$listView->grid(array('cols' => $cols));
?>

height

The height of the listview. Numeric values are treated as pixels.

Returns

\Kendo\UI\ListView

Parameters

$value float|string

Example - using float

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

Example - using string

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->height('value');
?>

layout

Specify the layout of listview content. Valid options are: flex: This is equivalent to display: flex. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns. or grid: This is equivalent to display: grid. It defines the element as a grid container and establishes a new grid formatting context for its contents..

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->layout('value');
?>

Indicates whether keyboard navigation is enabled/disabled.

Returns

\Kendo\UI\ListView

Parameters

$value boolean

Example

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

pageable

Indicates whether paging is enabled/disabled.

Returns

\Kendo\UI\ListView

Parameters

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

Example - using boolean

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->pageable(true);
?>

Example - using \Kendo\UI\ListViewPageable

<?php
$listView = new \Kendo\UI\ListView('ListView');
$pageable = new \Kendo\UI\ListViewPageable();
$buttonCount = 1;
$pageable->buttonCount($buttonCount);
$listView->pageable($pageable);
?>

Example - using array

<?php
$listView = new \Kendo\UI\ListView('ListView');
$buttonCount = 1;
$listView->pageable(array('buttonCount' => $buttonCount));
?>

remove

Fires before the list view item is put in edit mode. If the event is not prevented, the ListView will call the DataSource sync method.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the remove event documentation.

Returns

\Kendo\UI\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->remove('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onRemove(e) {
        // handle the remove event.
    }
</script>
<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->remove('onRemove');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->remove(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

save

Fired when a data item is saved.The event handler function context (available via the this keyword) will be set to the widget instance. For additional information check the save event documentation.

Returns

\Kendo\UI\ListView

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->save('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onSave(e) {
        // handle the save event.
    }
</script>
<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->save('onSave');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->save(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

scrollable

If set to true the listview will display a scrollbar when the content exceeds the listview height value. By default scrolling is disabled.It could be also set to endless in order to enable the endless scrolling functionality. In endless scrolling mode the height should be configured to display a scrollbar. Scrolling to the end of the scrollbar will load more items (equal to the pageSize number) and append them to the listview DOM element utill all items are loaded and displayed.

Returns

\Kendo\UI\ListView

Parameters

$value boolean|string

Example - using boolean

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

Example - using string

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->scrollable('value');
?>

selectable

Indicates whether selection is enabled/disabled. Possible values:

Returns

\Kendo\UI\ListView

Parameters

$value boolean|string

Example - using boolean

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->selectable(true);
?>

Example - using string

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->selectable('value');
?>

tagName

Specifies ListView wrapper element tag name.

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->tagName('value');
?>

template

The id of the template used for rendering the items in the listview.

Returns

\Kendo\UI\ListView

Parameters

$value string

Example

<?php
$listView = new \Kendo\UI\ListView('ListView');
$listView->template('value');
?>
In this article
Not finding the help you need?