ListViewComponent

Represents the Kendo UI ListView component for Angular. Displays a list of data items and supports paging, editing, and custom templates (see overview).

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-listview
      [data]="items"
      [pageable]="true"
      [pageSize]="5">
      <ng-template kendoListViewItemTemplate let-dataItem>
        <div class="item">
          <h3>{{ dataItem.name }}</h3>
          <p>{{ dataItem.description }}</p>
        </div>
      </ng-template>
    </kendo-listview>
  `
})
export class AppComponent {
  items = [
    { name: 'Item 1', description: 'First item' },
    { name: 'Item 2', description: 'Second item' }
  ];
}

Selector

kendo-listview

Export Name

Accessible in templates as #kendoListViewInstance="kendoListView"

Inputs

Name	Type	Default	Description
bordered	boolean	false	Specifies if a border should be rendered around the listview element.
containerClass?	string | string[] | Set<string> | {[key: string]: boolean}		Specifies the CSS class that renders on the content container element of the ListView. Supports the type of values that ngClass supports.
containerLabel?	string		Specifies the content container aria-label attribute (see example).
containerRole	string	'list'	Specifies the content container role attribute (more details).
containerStyle?	{[key: string]: string}		Specifies the CSS styles that render on the content container element of the ListView. Supports the type of values that ngStyle supports.
data	any[] | ListViewDataResult		Specifies the data collection that populates the ListView (see data binding examples).
height?	number		Specifies the height (in pixels) of the ListView component. When the content height exceeds the component height, a vertical scrollbar renders. 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}		Specifies the CSS class that renders on each item element wrapper of the ListView. Supports the type of values that ngClass supports.
itemStyle?	{[key: string]: string}		Specifies the CSS styles that render on each item element wrapper of the ListView. Supports the type of values that ngStyle supports.
listItemRole	string	'listitem'	Specifies the list item role attribute (more details).
loading	boolean	false	Specifies whether the loading indicator of the ListView displays (see example).
navigable	boolean	true	Specifies whether keyboard navigation is enabled (see example).
pageable	boolean | PagerSettings		Configures whether the ListView renders a pager (more details). When you provide a boolean value, it renders a pager with the default settings.
pageSize?	number		Specifies 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 keyboard navigation is disabled.

Events

Name	Type	Description
add	EventEmitter<AddEvent>	Fires when you click the Add command button to add a new item (see example).
cancel	EventEmitter<SaveEvent>	Fires when you click the Cancel command button to close an item (see example).
edit	EventEmitter<EditEvent>	Fires when you click the Edit command button to edit an item (see example).
pageChange	EventEmitter<PageChangeEvent>	Fires when you change the page or the page size of the ListView (see example). You have to handle the event yourself and page the data.
pageSizeChange	EventEmitter<PageSizeChangeEvent>	Fires when you change the page size of the ListView. You can prevent this event ($event.preventDefault()). When not prevented, the pageChange event fires subsequently.
remove	EventEmitter<RemoveEvent>	Fires when you click the Remove command button to remove an item (see example).
save	EventEmitter<SaveEvent>	Fires when you click the Save command button to save changes in an item (see example).
scrollBottom	EventEmitter<ScrollBottomEvent>	Fires when you scroll 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. When called with a data item, it builds the FormGroup from the data item fields.

closeItem
Closes the editor for a given item (see example).
Parameters index? number The item index that switches out of the edit mode. When you provide no index, the editor of the new item will close.

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

focus
Focuses the item at the specified index (see example): When you specify no index, the current active index receives focus. When the passed value is below 0, the first item receives focus. When the passed value is above the last available index, the last item receives focus. The index parameter is based on the logical structure of the ListView and does not correspond to the data item index&mdash the index 0 corresponds to the first rendered list item. Paging is not taken into account. Also, the navigable property must first be set to true for the method to work as expected.
Parameters index? number