• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / ListView / API / ListViewComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

ListViewComponent

Represents the Kendo UI ListView component for Angular.

Selector

kendo-listview

Export Name

Accessible in templates as #kendoListViewInstance="kendoListView"

Inputs

NameTypeDefaultDescription

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

NameTypeDefaultDescription

activeIndex

number

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

Events

NameTypeDescription

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

In this article

Not finding the help you need?

Contact Support