ListBoxComponent

Represents the Kendo UI ListBox component for Angular. Provides a list of items from which you can select and transfer data between connected ListBoxes (see overview).

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-listbox
      [data]="items"
      textField="name"
      [toolbar]="true">
    </kendo-listbox>
  `
})
export class AppComponent {
  items = [
    { name: 'Item 1' },
    { name: 'Item 2' }
  ];
}

Selector

kendo-listbox

Inputs

Name	Type	Default	Description
data	any[]	[]	Specifies the data that the ListBox displays.
itemDisabled	(item: any) => boolean		Specifies a function that determines if a specific item is disabled.
listboxLabel	string	'Listbox'	Specifies the value of the aria-label attribute of the Listbox element.
listboxToolbarLabel	string	'Toolbar'	Specifies the value of the aria-label attribute of the Listbox toolbar element.
size	ListBoxSize		Specifies the size of the component.
textField	string		Specifies the field of the data item that provides the text content of the nodes.
toolbar	ListBoxToolbarConfig		Configures the toolbar of the ListBox. Specifies whether to display a toolbar and which tools and position to use.

Fields

Name	Type	Default	Description
selectedIndex	number		Gets the index of the currently selected item in the ListBox.

Events

Name	Type	Description
actionClick	EventEmitter<ActionName>	Fires when you click a ListBox item.
selectionChange	EventEmitter<ListBoxSelectionEvent>	Fires when you select a different ListBox item. Also fires when you move a node, because moving changes its index.

Methods

clearSelection
Clears the ListBox selection programmatically.

selectItem
Selects a ListBox node programmatically.
Parameters index number