Data Binding
The Kendo UI for Angular ListBox is a component that displays a list of items.
The data
input of the ListBox accepts an array of items - strings or objects.
If objects are used, it is necessary to pass a textField
input to the component, so that the correct text can be displayed for each item.
It is important to note that out of the box, the component is purely presentational and the buttons of its toolbar are not tied to a specific behavior. Instead, the ListBox emits an actionClick
event every time a button is pressed.
There are two ways to make the buttons work:
Using the Data-Binding Directive
Use the kendoListBoxDataBinding
directive which handles the actionClick
events automatically. When the end user interacts with the toolbar, the directive modifies the original data array accordingly. As an added benefit, the directive accepts the connectedWith
input property, which lets the user connect multiple listboxes together and move items between them.
Manual Data Binding
Bind to the actionClick
event and modify your data in its handler. This allows for full flexibility with regard to handling actions.
Some other useful building blocks for the manual handling of the actionClick
events, are the selectItem
method and the selectedIndex
field of the ListBox.