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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.
Example
View Source
Edit In Stackblitz  
Change Theme: