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

Data Binding

The Menu enables you to bind it to an array of MenuItem objects by using its items property.

Each MenuItem may contain an items array of child items.

Binding to Local Data

The following example demonstrates how to bind the Menu to local data.

Example
View Source
Change Theme:

Binding to Remote Data

The following example demonstrates how to bind the Menu to remote data.

Example
View Source
Change Theme:

Built-in Directives

To simplify data binding and minimize boilerplate code, the Menu delivers the following built-in directives:

  • kendoMenuHierarchyBinding—Handles the conversion to array of MenuItems of hierarchical data.
  • kendoMenuFlatBinding—Handles the conversion to array of MenuItems of flat data.

Hierarchy Binding

The kendoMenuHierarchyBinding directive simplifies the binding to hierarchical data. To use it, bind the directive to the data and set the childrenField, textField, etc. properties to the fields from the data that should be used to create the MenuItems. If a property is set to a array of fields, each hierarchical level uses the field that corresponds to the same index in the array, or the last item in the array. If a property is set to a field then it will be used for all levels.

The following example demonstrates using the kendoMenuHierarchyBinding directive.

Example
View Source
Change Theme:

Flat Binding

The kendoMenuFlatBinding directive simplifies the binding to flat data. To use it, bind the directive to the data and set the idField and parentIdField to the fields from the data that represent the relation between parent and child nodes.

The following example demonstrates using the kendoMenuFlatBinding directive.

Example
View Source
Change Theme:

Updating the binding directives

If individual fields or items are modified, Angular will not detect a change for the data and the Menu will not be updated. In this case you can update the Menu by using the directives rebind method.

The following example demonstrates updating the Menu after modifying the data.

Example
View Source
Change Theme: