ListViewComponent

Represents the Kendo UI ListView component for Angular.

Selector

kendo-listview

Export Name

Accessible in templates as #kendoListViewInstance="kendoListView"

Inputs

Name	Type	Default	Description
bordered	boolean	true	Specifies if a border should be rendered around the listview element.
containerClass	string | string[] | Set<string> | {[key: string]: boolean}		The CSS class that will be rendered on the content container element of the ListView. Supports the type of values that are supported by ngClass.
containerLabel	string		Specifies the content container aria-label attribute (see example).
containerRole	string		Specifies the content container role attribute (more details). By default, the container role is set to list.
containerStyle	{[key: string]: string}		The CSS styles that will be rendered on the content container element of the ListView. Supports the type of values that are supported by ngStyle.
data	any[] | ListViewDataResult		The data collection that will be used to populate the ListView (see data binding examples).
height	number		Defines the height (in pixels) of the ListView component. If the content height exceeds the component height, a vertical scrollbar will be rendered. To set the height of the ListView, you can also use style.height. The style.height option supports units such as px, %, em, rem, and others.
itemClass	string | string[] | Set<string> | {[key: string]: boolean}		The CSS class that will be rendered on each item element wrapper of the ListView. Supports the type of values that are supported by ngClass.
itemStyle	{[key: string]: string}		The CSS styles that will be rendered on each item element wrapper of the ListView. Supports the type of values that are supported by ngStyle.
listItemRole	string		Specifies the list item role attribute (more details). By default, the list item role is set to listitem.
loading	boolean		Specifies if the loading indicator of the ListView will be displayed (see example).
navigable	boolean		Specifies whether the keyboard navigation is enabled (see example). By default, the navigation is disabled.
pageable	boolean | PagerSettings		Configures whether the ListView will render a pager (more details). Providing a boolean value will render a pager with the default settings.
pageSize	number		Defines the page size used by the ListView pager (more details).
skip	number		Defines the number of records to be skipped by the pager (more details).

Fields

Name	Type	Default	Description
activeIndex	number		Gets the current active item index (see example). Returns null when the keyboard navigation is disabled.

Events

Name	Type	Description
add	EventEmitter<AddEvent>	Fires when the user clicks the Add command button to add a new item (see example).
cancel	EventEmitter<SaveEvent>	Fires when the user clicks the Cancel command button to close an item (see example).
edit	EventEmitter<EditEvent>	Fires when the user clicks the Edit command button to edit an item (see example).
pageChange	EventEmitter<PageChangeEvent>	Fires when the page or the page size of the ListView is changed (see example). You have to handle the event yourself and page the data.
pageSizeChange	EventEmitter<PageSizeChangeEvent>	Fires when the page size of the ListView is changed. This event can be prevented ($event.preventDefault()). If not prevented, the pageChange event will be fired subsequently.
remove	EventEmitter<RemoveEvent>	Fires when the user clicks the Remove command button to remove an item (see example).
save	EventEmitter<SaveEvent>	Fires when the user clicks the Save command button to save changes in an item (see example).
scrollBottom	EventEmitter<ScrollBottomEvent>	Fires when the user scrolls to the last record on the page (see endless scrolling example).

Methods

addItem
Creates a new item editor (see example).
Parameters group any The FormGroup that describes the edit form. If called with a data item, it will build the FormGroup from the data item fields.

closeItem
Closes the editor for a given item (see example).
Parameters index? number The item index that will be switched out of the edit mode. If no index is provided, it is assumed that the new item editor will be closed.

editItem
Switches the specified item to edit mode (see example).
Parameters index number The item index that will be switched to edit mode. group? any The FormGroup that describes the edit form.

focus
Focuses the item at the specified index (see example): If no index is specified, the current active index will be focused. If the passed value is below 0, the first item receives focus. If the passed value is above the last available index, the last item receives focus. The index param is based on the logical structure of the ListView and does not correspond to the data item index - i.e. the index 0 corresponds to the first rendered list item. Paging is not taken into account. Also, for the focusing to work, the navigable prop must first be set to true.
Parameters index? number