Skip to content

Commit cd85ab4

Browse files
Merge pull request #45 from DHTMLX/GS-3230
update data model guides
2 parents a364012 + 9bdad88 commit cd85ab4

9 files changed

Lines changed: 524 additions & 244 deletions

File tree

docs/api/method/parse.md

Lines changed: 82 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -10,190 +10,118 @@ description: "loads data from a client-side resource"
1010

1111
@short: Loads data from a client-side resource
1212

13-
@signature: parse: (data: string | DataToLoad1 | DataToLoad2, type?: string) =\> void
13+
@signature: parse: (data: string | GanttData, type?: string) => void
1414

1515
### Parameters
1616

17-
- `data` - (required) *string | DataToLoad* - a string or object which represents [data](guides/loading.md#dataproperties)
18-
- `type` - (optional) *string* - optional, (<i>'json', 'xml'</i>) the data type. The default value - <i>'json'</i>
17+
- `data` - (required) *string | GanttData* - a string or object which represents [data](guides/loading.md#dataproperties)
18+
- `type` - (optional) *string* - optional, (`'json'`, `'xml'`) the data type. The default value is `'json'`
1919

2020
### Example
2121

2222
~~~jsx
2323
gantt.parse({
24-
data:[
25-
{id:1, text:"Project #2", start_date:"01-04-2023", duration:18},
26-
{id:2, text:"Task #1", start_date:"02-04-2023", duration:8,
27-
progress:0.6, parent:1},
28-
{id:3, text:"Task #2", start_date:"11-04-2023", duration:8,
29-
progress:0.6, parent:1}
24+
tasks: [
25+
{ id: 1, text: "Project #2", start_date: "2026-04-01", duration: 18 },
26+
{ id: 2, text: "Task #1", start_date: "2026-04-02", duration: 8, progress: 0.6, parent: 1 },
27+
{ id: 3, text: "Task #2", start_date: "2026-04-11", duration: 8, progress: 0.6, parent: 1 }
3028
],
31-
links:[
32-
{ id:1, source:1, target:2, type:1},
33-
{ id:2, source:2, target:3, type:0}
29+
links: [
30+
{ id: 1, source: 1, target: 2, type: "1" },
31+
{ id: 2, source: 2, target: 3, type: "0" }
3432
]
3533
});
3634
~~~
3735

3836
### Related samples
37+
3938
- [Basic initialization](https://docs.dhtmlx.com/gantt/samples/01_initialization/01_basic_init.html)
4039

4140
### Details
4241

43-
Gantt expects that *an array with tasks* will be named either **data** or **tasks** whereas *an array with links* will be named **links**.
44-
45-
This is the list of expected properties:
46-
47-
- **data** - (*[] | NewTask[]*) - the array with the task data
48-
- **links?** - (*Link[]*) - the array with the link data
49-
- **resources?** - (*NewResourceItem[]*) - the array with the resource data
50-
- **assignments?** - (*NewAssignmentItem[]*) - the array with the assignment data
51-
- **collections?** - (*Сollections*) - the object that has the arrays with the custom data
52-
53-
~~~js
54-
gantt.parse({
55-
data: [
56-
{ id: 1, start_date: "2025-09-23", duration: 42,
57-
text: "House Construction" },
58-
{ id: 2, start_date: "2025-12-02", duration: 60,
59-
text: "House Construction" },
60-
],
61-
"links": [
62-
{ id: "1", source: "1", target: "2", type: "0" },
63-
],
64-
"resources": [
65-
{ id: 1, text: "Anna, Architect", unit: "hours/day",
66-
default_value: 8, type: "work" },
67-
],
68-
"assignments": [
69-
{ task_id: "1", resource_id: "1", value: "8" },
70-
{ task_id: "2", resource_id: "1", value: "8",
71-
mode: "fixedDates", start_date: "2025-09-23",
72-
end_date: "2025-09-25", duration: 4, delay: 2, },
73-
{ task_id: "2", resource_id: "1", value: "8",
74-
start_date: new Date("2025-09-23 00:00:00"),
75-
end_date: new Date("2025-09-26 00:00:00"), },
76-
]
77-
})
78-
~~~
79-
80-
81-
The **data** or **tasks** array expects the **NewTask** object that is different from the **Task** object. It can be a string, an empty object.
82-
It can have the same properties as the [**Task** object](guides/task-properties.md), and you can add any custom properties there.
83-
The difference is that some properties of the **Task** object that start from the *$* sign are ignored and the dates can have the *string* type.
84-
Here is the type description:
85-
86-
- **NewTask** - (*string | {} | object*) - the task object that will be added to Gantt. It can have the following properties:
87-
- **_id?_** - (*string | number*) - optional, the task ID, auto-generated if not set.
88-
- **_start_date?_** - (*string | Date*) - optional, the date when a task is scheduled to begin.
89-
- **_duration?_** - (*number*) - optional, the task duration.
90-
- **_end_date?_** - (*string | Date*) - optional, the date when a task is scheduled to be completed.
91-
- **_text?_** - (*string*) - optional, the task name.
92-
- **_open?_** - (*boolean*) - optional, specifies if the task will be opened on load (to show child tasks).
93-
- **_parent?_** - (*string | number*) - optional, the ID of the parent task.
94-
- **_constraint_date?_** - (*string | Date*) - optional, the date of the task constraint.
95-
- **_[customProperty: string]_** - (*any*) - any other property you want to add, including the ones from the [**Task** object](guides/task-properties.md)
96-
97-
This is not the full list of possible task properties. For that, please refer to [this article](guides/task-properties.md).
98-
99-
~~~js
100-
gantt.parse({
101-
data: [
102-
{ id: 1, start_date: "2025-09-23", duration: 42,
103-
text: "House Construction" },
104-
]
105-
})
106-
~~~
107-
42+
The `parse()` method accepts the top-level [GanttData](guides/data-model.md#ganttdata) object.
10843

109-
---
44+
Gantt expects that the array with tasks will be named either `data` or `tasks`, while the array with links will be named `links`.
11045

46+
This is the list of supported properties:
11147

112-
The **links** array expects the [**Link** objects](guides/link-properties.md).
48+
- `tasks` or `data` - (`(SerializedTask | Task)[]`) the array with task data
49+
- `links?` - (`(SerializedLink | Link)[]`) the array with link data
50+
- `resources?` - (`Partial<ResourceItem>[]`) the array with resource data
51+
- `assignments?` - (`(SerializedResourceAssignment | ResourceAssignment)[]`) the array with assignment data
52+
- `baselines?` - (`(SerializedBaseline | Baseline)[]`) the array with baseline data
53+
- `collections?` - (`Record<string, Array<Record<string, unknown>>>`) the object with custom collections
11354

11455
~~~js
11556
gantt.parse({
116-
data: [],
57+
tasks: [
58+
{ id: 1, start_date: "2026-04-01", duration: 42, text: "House Construction" },
59+
{ id: 2, start_date: "2026-04-20", duration: 60, text: "Interior Works" }
60+
],
11761
links: [
118-
{ id: "1", source: "1", target: "2", type: "0" },
119-
]
120-
})
121-
~~~
122-
123-
---
124-
125-
126-
The **resources** array expects the **NewResourceItem** object that may have the properties below:
127-
128-
- **NewResourceItem** - (*object*) - the resource item object that will be added to Gantt. It can have the following properties:
129-
- **_id?_** - (*string | number*) - optional, the resource ID, auto-generated if not set
130-
- **_parent?_** - (*string | number*) - optional, the ID of the parent resource
131-
- **_text?_** - (*string*) - optional, the resource name
132-
- **_open?_** - (*boolean*) - optional, specifies if the resource will be opened on load (to show child items)
133-
- **_unit?_** - (*string | number*) - optional, the unit of the resource assignment
134-
- **_default_value?_** - (*string | number*) - optional, the value that is assigned by default when adding the assignment in the lightbox section
135-
- **_[customProperty: string]_** - (*any*) - any other property you want to add
136-
137-
~~~js
138-
gantt.parse({
139-
data: [],
62+
{ id: "1", source: "1", target: "2", type: "0" }
63+
],
14064
resources: [
141-
{ id: 1, text: "Anna, Architect", unit: "hours/day",
142-
default_value: 8, type: "work" },
65+
{ id: 1, text: "Anna, Architect", unit: "hours/day", default_value: 8, type: "work" }
66+
],
67+
assignments: [
68+
{ task_id: "1", resource_id: "1", value: "8" },
69+
{
70+
task_id: "2",
71+
resource_id: "1",
72+
value: "8",
73+
mode: "fixedDates",
74+
start_date: "2026-04-20",
75+
end_date: "2026-04-22",
76+
duration: 4,
77+
delay: 2
78+
},
79+
{
80+
task_id: "2",
81+
resource_id: "1",
82+
value: "8",
83+
start_date: new Date("2026-04-20T00:00:00"),
84+
end_date: new Date("2026-04-23T00:00:00")
85+
}
86+
],
87+
baselines: [
88+
{
89+
id: "b1",
90+
task_id: 1,
91+
start_date: "2026-03-28",
92+
duration: 42,
93+
end_date: "2026-05-09"
94+
}
14395
]
144-
})
96+
});
14597
~~~
14698

99+
`data` and `tasks` are alternative keys for the same task array. `tasks` is preferred in new code.
147100

148-
---
149-
150-
151-
The **assignments** array expects the **NewAssignmentItem** object that may have the properties below:
152-
153-
- **NewAssignmentItem** - (*object*) - the assignment item object that will be added to Gantt. It can have the following properties:
154-
- **_id?_** - (*string | number*) - optional, the assignment ID, auto-generated if not set
155-
- **_task_id_** - (*string | number*) - the ID of the task the resource is assigned to
156-
- **_resource_id_** - (*string | number*) - the ID of the resource that is assigned to the task
157-
- **_value_** - (*number | string*) - optional, the assignment value
158-
- **_mode?_** - (*string*) - optional, the calculation mode of the time of the resource assignment: "default"|"fixedDates"|"fixedDuration"
159-
- **_delay?_** - (*number*) - optional, the difference between the assignment start date and the task start date
160-
- **_start_date?_** - (*string | Date*) - optional, the date the assignment should start
161-
- **_duration?_** - (*number*) - optional, the assignment duration
162-
- **_end_date?_** - (*string | Date*) - optional, the date the assignment should end
163-
- **_[customProperty: string]_** - (*any*) - any other property you want to add
164-
101+
If you load data from a JavaScript object created in code, `Task`, `ResourceAssignment`, and other runtime objects may contain `Date`. When data is exchanged as JSON with the server, date fields should be strings.
165102

166-
~~~js
167-
gantt.parse({
168-
data: [],
169-
assignments: [
170-
{ task_id: "1", resource_id: "1", value: "8" },
171-
]
172-
})
173-
~~~
103+
### Legacy Compatibility Names
174104

175-
---
176-
177-
The **collections** object allows loading any custom data. The properties can have any name, and the value should be an array that contains the collection items:
105+
Older API docs and typings still use several compatibility aliases:
178106

179-
- **[collectionName: string]** - (*[] | СollectionItem[]*) - an array that contains the collection items.
107+
- `DataToLoad1`, `DataToLoad2`
108+
- `NewTask`
109+
- `NewResourceItem`
110+
- `NewAssignmentItem`
180111

181-
The **СollectionItem** is an object that can have any properties. It has the following types for its properties:
112+
These names are kept for backward compatibility. The canonical overview of the accepted shapes is the [Data Model](guides/data-model.md) article.
182113

183-
- **[itemProperty: string]** - (*any*) - any custom property of the collection item.
114+
### Collections
184115

116+
The `collections` object allows loading custom lists used by editors and controls. The property names can be arbitrary, and each value should be an array of collection items.
185117

186118
~~~js
187119
gantt.parse({
188-
data: [
189-
{ "id": "1", "text": "Task #1", "priority": 1,
190-
"start_date": "02-04-2019", "duration": 1, },
191-
{ "id": "2", "text": "Task #2", "priority": 2,
192-
"start_date": "01-04-2019", "duration": 1, },
193-
{ "id": "3", "text": "Task #3", "priority": 3,
194-
"start_date": "02-04-2019", "duration": 1, },
195-
{ "id": "4", "text": "Task #4", "priority": 1,
196-
"start_date": "03-04-2019", "duration": 1, },
120+
tasks: [
121+
{ id: "1", text: "Task #1", priority: 1, start_date: "2026-04-01", duration: 1 },
122+
{ id: "2", text: "Task #2", priority: 2, start_date: "2026-04-02", duration: 1 },
123+
{ id: "3", text: "Task #3", priority: 3, start_date: "2026-04-03", duration: 1 },
124+
{ id: "4", text: "Task #4", priority: 1, start_date: "2026-04-04", duration: 1 }
197125
],
198126
links: [],
199127
collections: {
@@ -206,64 +134,26 @@ gantt.parse({
206134
});
207135
~~~
208136

209-
---
210-
137+
### Empty Task Array
211138

212-
If you want to load data which doesn't contain tasks, you still need to define an array of tasks in the object with data but it can be empty:
139+
If you want to load data that does not contain tasks, you still need to define an empty task array:
213140

214141
~~~js
215142
gantt.parse({
216-
tasks:[],
217-
links:[
218-
{ id:1, source:1, target:2, type:1},
219-
{ id:2, source:2, target:3, type:0}
220-
]
221-
});
222-
~~~
223-
224-
225-
From v8.0, besides tasks and links, you can load resources and resource assignments into the gantt via the **parse()** method:
226-
227-
~~~js
228-
gantt.parse({
229-
tasks: [
230-
...,
231-
{
232-
id: 5,
233-
text: "Interior office",
234-
type: "task",
235-
start_date: "03-04-2024 00:00",
236-
duration: 7,
237-
parent: "2",
238-
owner: [
239-
{
240-
resource_id: "6",
241-
value: 3,
242-
start_date: "03-04-2024 00:00",
243-
end_date: "05-04-2024 00:00",
244-
}
245-
]
246-
},
247-
...
248-
],
249-
links: [],
250-
resources: [
251-
{id: 6, text: "John", unit: "hours/day" },
252-
{id: 7, text: "Mike", unit: "hours/day" },
253-
{id: 8, text: "Anna", unit: "hours/day" },
254-
{id: 9, text: "Bill", unit: "hours/day" },
255-
{id: 10, text: "Floe", unit: "hours/day" }
143+
tasks: [],
144+
links: [
145+
{ id: 1, source: 1, target: 2, type: "1" },
146+
{ id: 2, source: 2, target: 3, type: "0" }
256147
]
257148
});
258149
~~~
259150

260-
You can read more [here](guides/resource-management.md#loading-resources-and-resource-assignments).
261-
262151
### Related API
152+
263153
- [load](api/method/load.md)
264154

265155
### Related Guides
156+
157+
- [Data Model](guides/data-model.md)
266158
- [Data Loading](guides/loading.md)
267159
- [Supported Data Formats](guides/supported-data-formats.md)
268-
- [Supported Data Formats](guides/supported-data-formats.md#jsonwithcollections) (read how to load JSON with Collections)
269-

0 commit comments

Comments
 (0)