Data Binding
The Gantt enables you to bind it to a list of possible values.
To populate the Gantt with data, bind the component to either:
Locally defined values are best for small, fixed sets of data. For larger datasets, use remote data services.
Local Data Arrays
To provide the Gantt with local data:
- Define the array in the
data
object of the Vue application. - Refer it during the initialization of the Gantt through the
:data-source
property.
Binding to Remote Data Services
To provide the Gantt with data by using remote data services:
- Create a new
ganttdatasource
object and, optionally, aganttdependencydatasource
object. - Refer the
ganttdatasource
andganttdependencydatasource
objects during the initialization of the Gantt through the:data-source-ref
anddependencies-data-source-ref
properties.
The ganttdatasource
object contains the configuration for the necessary data operation actions such as Read
, Update
, Create
, or Destroy
. To refer the remote data services, use the Transport
object properties of the ganttdatasource
—for example, :transport-read-url
, :transport-update-url
, and so on.
The ganttdependencydatasource
object is responsible for the relations between the tasks that are visualized in the widget. The object contains the configurations for the services references for the read, update, create, destroy etc operations for the dependencies.