<kendo:listView>

A JSP wrapper for Kendo UI ListView.

Configuration Attributes

altTemplate java.lang.String

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

Example

<kendo:listView altTemplate="altTemplate">
</kendo:listView>

autoBind boolean

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.

Example

<kendo:listView autoBind="autoBind">
</kendo:listView>

bordered boolean

Renders border around the listview element.

Example

<kendo:listView bordered="bordered">
</kendo:listView>

borders java.lang.String

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..

Example

<kendo:listView borders="borders">
</kendo:listView>

contentElement java.lang.String

Defines the type of element that holds the listview content.

Example

<kendo:listView contentElement="contentElement">
</kendo:listView>

editTemplate java.lang.String

Specifies ListView item template in edit mode.

Example

<kendo:listView editTemplate="editTemplate">
</kendo:listView>

height java.lang.Object

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

Example

<kendo:listView height="height">
</kendo:listView>

layout java.lang.String

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..

Example

<kendo:listView layout="layout">
</kendo:listView>

Indicates whether keyboard navigation is enabled/disabled.

Example

<kendo:listView navigatable="navigatable">
</kendo:listView>

pageable boolean

Indicates whether paging is enabled/disabled. Further configuration is available via kendo:listView-pageable.

Example

<kendo:listView pageable="pageable">
</kendo:listView>

scrollable java.lang.Object

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.

Example

<kendo:listView scrollable="scrollable">
</kendo:listView>

selectable java.lang.Object

Indicates whether selection is enabled/disabled. Possible values:

Example

<kendo:listView selectable="selectable">
</kendo:listView>

tagName java.lang.String

Specifies ListView wrapper element tag name.

Example

<kendo:listView tagName="tagName">
</kendo:listView>

template java.lang.String

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

Example

<kendo:listView template="template">
</kendo:listView>

Configuration JSP Tags

kendo:listView-flex

Flex layout settings

More documentation is available at kendo:listView-flex.

Example

<kendo:listView>
    <kendo:listView-flex></kendo:listView-flex>
</kendo:listView>

kendo:listView-grid

Grid layout settings.

More documentation is available at kendo:listView-grid.

Example

<kendo:listView>
    <kendo:listView-grid></kendo:listView-grid>
</kendo:listView>

kendo:listView-pageable

Indicates whether paging is enabled/disabled.

More documentation is available at kendo:listView-pageable.

Example

<kendo:listView>
    <kendo:listView-pageable></kendo:listView-pageable>
</kendo:listView>

Event Attributes

cancel String

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.

Example

<kendo:listView cancel="handle_cancel">
</kendo:listView>
<script>
    function handle_cancel(e) {
        // Code to handle the cancel event.
    }
</script>

change String

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.

Example

<kendo:listView change="handle_change">
</kendo:listView>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

dataBound String

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.

Example

<kendo:listView dataBound="handle_dataBound">
</kendo:listView>
<script>
    function handle_dataBound(e) {
        // Code to handle the dataBound event.
    }
</script>

dataBinding String

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.

Example

<kendo:listView dataBinding="handle_dataBinding">
</kendo:listView>
<script>
    function handle_dataBinding(e) {
        // Code to handle the dataBinding event.
    }
</script>

edit String

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.

Example

<kendo:listView edit="handle_edit">
</kendo:listView>
<script>
    function handle_edit(e) {
        // Code to handle the edit event.
    }
</script>

remove String

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.

Example

<kendo:listView remove="handle_remove">
</kendo:listView>
<script>
    function handle_remove(e) {
        // Code to handle the remove event.
    }
</script>

save String

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.

Example

<kendo:listView save="handle_save">
</kendo:listView>
<script>
    function handle_save(e) {
        // Code to handle the save event.
    }
</script>

Event Tags

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-cancel>
        <script>
            function(e) {
                // Code to handle the cancel event.
            }
        </script>
    </kendo:listView-cancel>
</kendo:listView>

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:listView-change>
</kendo:listView>

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-dataBound>
        <script>
            function(e) {
                // Code to handle the dataBound event.
            }
        </script>
    </kendo:listView-dataBound>
</kendo:listView>

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-dataBinding>
        <script>
            function(e) {
                // Code to handle the dataBinding event.
            }
        </script>
    </kendo:listView-dataBinding>
</kendo:listView>

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-edit>
        <script>
            function(e) {
                // Code to handle the edit event.
            }
        </script>
    </kendo:listView-edit>
</kendo:listView>

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-remove>
        <script>
            function(e) {
                // Code to handle the remove event.
            }
        </script>
    </kendo:listView-remove>
</kendo:listView>

kendo:listView-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.

Example

<kendo:listView>
    <kendo:listView-save>
        <script>
            function(e) {
                // Code to handle the save event.
            }
        </script>
    </kendo:listView-save>
</kendo:listView>
In this article
Related articles
Not finding the help you need?