New to Kendo UI for Angular? Start a free 30-day trial

ListViewComponent

Component

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

Definition

Package:@progress/kendo-angular-listview

Selector:kendo-listview

Export Name:Accessible in templates as #kendoListViewInstance="kendoListView"

Syntax:

@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' }
  ];
}

Inputs

bordered

boolean

Specifies if a border should be rendered around the listview element.

Default:

false

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

Specifies the content container role attribute (more details).

Default:

'list'

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

Specifies the list item role attribute (more details).

Default:

'listitem'

loading

boolean

Specifies whether the loading indicator of the ListView displays (see example).

Default:

false

navigable

boolean

Specifies whether keyboard navigation is enabled (see example).

Default:

true

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

activeIndex

number

Gets the current active item index (see example). Returns null when keyboard navigation is disabled.

Events

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:groupany

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:indexnumber

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