Angular MultiColumnComboBox Data Binding
The Angular MultiColumnComboBox provides flexible data-binding to display items in a multi-column dropdown list. Set the data property to an array of objects—to use primitive values, use the ComboBox instead.
Choose the binding approach that best fits your data source and application requirements.
You can bind the MultiColumnComboBox to:
Fields Configuration
To bind the MultiColumnComboBox to object data, set the textField and valueField properties. The textField property specifies which object field the component displays in the input, while the valueField property specifies which field the component uses as the item value.
To define the columns in the dropdown popup, add a kendo-combobox-column element for each column you want to display. For more details on the available column options, refer to the Columns article.
<kendo-multicolumncombobox
[data]="products"
textField="productName"
valueField="productId">
<kendo-combobox-column field="productName" title="Name"></kendo-combobox-column>
<kendo-combobox-column field="unitPrice" title="Price"></kendo-combobox-column>
</kendo-multicolumncombobox>The MultiColumnComboBox can still emit primitive values when the user selects an item. For more details, refer to the Value Binding article.
Binding to Local Data
To bind the MultiColumnComboBox to local data, assign an array of objects to the data property and configure the textField, valueField, and column definitions.
The following example demonstrates how to bind the MultiColumnComboBox to an array of local objects.
Binding to Remote Data
You can fetch data from a remote endpoint through an Angular service and assign the result to the data property. To indicate that data is loading, set the loading property to true.
The following example demonstrates how to bind the MultiColumnComboBox to remote data by using a service.