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.
Binding to Remote Data
The following example demonstrates how to bind the Menu to remote data.
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 ofMenuItemsof hierarchical data.kendoMenuFlatBinding—Handles the conversion to array ofMenuItemsof 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.
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.
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.