Data Binding Directives
The Gantt ships with a set of directives that address common scenarios for data binding.
The built-in directives take the entire data set as their input and process it in-memory. Sorting and filtering are handled automatically.
Generally, the data operations of the Gantt rely on emitting events, such as sortChange and filterChange. The events contain information about the manipulations you need to apply on the data collection to which the Gantt is bound. As a result, the Gantt is able to reflect the current filter and sort states. The dataStateChange event combines these separate events and fires after each of them to allow you to manipulate the data in a single instead of many event handlers.
The binding directives encapsulate the logic for handling the dataStateChange event and the respective data manipulations. Practically, the directives make the component code cleaner, shorter, and more concise because they allow you to reuse the data-binding logic.
Binding to Flat Data
The kendoGanttFlatBinding directive enables you to bind the Gantt to an array which contains all nodes. Parent-child relationships are defined by assigning a unique ID and a parent ID to each node.
To bind the Gantt to flat data, pass the array to the directive and set the idField and parentIdField fields.
Binding to Hierarchical Data
The kendoGanttHierarchyBinding directive enables you to bind the Gantt to objects that store an array of child nodes in a field.
To bind the Gantt to hierarchical data, pass the array of root nodes to the directive and set the childrenField input.
Updating Data Items
The binding directives cache the source data, and updates to individual items will not be reflected.
To refresh the Gantt when using the data binding directives, perform one of the following:
- Replace the source data array with a new instance.
- Invoke the
rebind()method on the directive.
