Webix Gantt expects a common URL for loading and saving tasks and links:
view:"gantt", url:"remote/data"
More information on routes and parameters is located in the Working with Server article.
If you do not have a backend server or require non-standard logic, you can customize the Backend service.
Gantt expects JSON data where each element of the array is an object with the following fields:
JSON example
[
{
"text":"Project A","start_date":"2018-06-13 00:00:00",
"duration":"1","parent":"0","progress":0.5,"open":true,
"notes":"Weekly meeting required", "type": "project",
"end_date":"2018-06-14 00:00:00","id":"1"
},
// other tasks
]
Gantt expects JSON data where each element of the array is an object with the following fields:
JSON example
[
{"source":"1.2","target":"2","type":1},
// other links
]
Gantt has the following services for data:
1. Local Data
const local = $$("gantt").getService("local");
const scales = local.getScales(); //returns current scales settings
2. Operations
const ops = $$("gantt").getService("operations");
ops.addTask(obj, index, parent); // adds a new task
3. Backend
const back = $$("gantt").getService("backend");
back.tasks().then((data) => console.log(data));
Study the models folder in the source code for method signatures.
All the tasks are stored in a TreeCollection. The collection is accessible via the tasks() method of the Local Data service.
const tasks = $$("gantt").getService("local").tasks();
To make sure that the data is already loaded, use the waitData method to wait for a data promise.
Getting a particular task
const tasks = $$("gantt").getService("local").tasks();
tasks.waitData.then(function(){
tasks.getItem(tasks.getFirstId()); // get first task
});
You can get an array of all tasks by serializing the collection:
Serializing tasks collection
const tasks = $$("gantt").getService("local").tasks();
tasks.waitData.then(function(){
const arr = tasks.serialize(); // get an array of tasks
/*[
{
"text":"Task A1","start_date":"2018-06-12 00:00:00",
"duration":"2","progress":31,"parent":"1",
"notes":"Contact Rob for details", "type": "task",
"end_date":"2018-06-14 00:00:00","id":"1.1"
},
...
]*/
});
All the links are stored in a DataCollection. The collection is accessible via the links() method of the Local Data service.
const links = $$("gantt").getService("local").links();
To make sure that the data is already loaded, use the waitData method to wait for a data promise.
Getting a particular link
const links = $$("gantt").getService("local").links();
links.waitData.then(function(){
links.getItem(links.getFirstId()); // get first link
});
You can get an array of all links by serializing the collection:
Serializing links collection
const links = $$("gantt").getService("local").links();
links.waitData.then(function(){
const arr = links.serialize(); // get an array of links
/*[
{"source":"1.2","target":"2","type":1},
...
]/*
});
You can get links coming out or into a particular task by calling the getLinks() method of the Local Data service. It accepts 2 parameters:
Serializing outcoming links of a particular task
const link = $$("gantt").getService("local").getLinks(1.2, "source");
Related sample: Gantt: Data Operations
The method returns an object with the following fields:
JSON example
{
id: "5", text: "Project B",
ttype: "source", type: "1"
}
Back to top