Skip to content

Commit ab52c40

Browse files
AlexKlimenkovAlexKlimenkov
authored
Merge pull request #64 from mlakatkou/GS-3305
[update] task-tree-operations article
2 parents a78826f + f1a5b8d commit ab52c40

1 file changed

Lines changed: 97 additions & 119 deletions

File tree

‎docs/guides/task-tree-operations.md‎

Lines changed: 97 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -5,185 +5,163 @@ sidebar_label: "Task Parent/Child"
55

66
# Task Parent/Child
77

8-
In this article you will find methods related to the tree nature of the Gantt chart tasks.
8+
In this article, you will find methods related to the tree structure of Gantt chart tasks.
99

10-
*To learn about basic operations of getting the task object/id, refer to the [Task Object/Id](guides/task-object-operations.md) article.*
10+
*To learn about basic operations for getting the task object or ID, refer to the [Task Object/Id](guides/task-object-operations.md) article.*
1111

1212
## Parent of a task
1313

14-
To get the parent of a task, use the [getParent](api/method/getparent.md) method or the "**parent**" property of the task's object:
14+
To get the parent of a task, use the [`getParent()`](api/method/getparent.md) method or the `"parent"` property of the task object:
1515

1616
~~~js
17-
gantt.getParent("t1");//->"pr_2"
18-
//or
19-
var taskObj = gantt.getTask("t1");//-> {id:"t1", text:"Task #5", parent:"pr_2", ...}
20-
var taskParent = taskObj.parent; //-> "pr_2"
17+
gantt.getParent("t1"); // -> "pr_2"
18+
// or
19+
const task = gantt.getTask("t1"); // -> { id: "t1", text: "Task #5", parent: "pr_2", ... }
20+
const parentId = task.parent; // -> "pr_2"
2121
~~~
22-
Note, if there is no parent for the specified task, the method returns the [root id](api/config/root_id.md).
2322

23+
If there is no parent for the specified task, the method returns the [root ID](api/config/root_id.md).
2424

2525
## Children of a task
2626

27-
To get children of a branch task, use the [getChildren](api/method/getchildren.md) method:
27+
To get the children of a branch task, use the [`getChildren()`](api/method/getchildren.md) method:
2828

2929
~~~js
30-
var data = {
31-
tasks:[
32-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
33-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
34-
parent:"p_1"}
35-
]};
36-
gantt.getChildren("p_1");//->["t_1"]
30+
const taskData = {
31+
tasks: [
32+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18 },
33+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" }
34+
]
35+
};
36+
37+
gantt.getChildren("p_1"); // -> ["t_1"]
3738
~~~
3839

39-
To get all children of a task (not only the 1 st-level child tasks), apply the [eachTask()](api/method/eachtask.md) method and pass the ID of the parent task as a second parameter:
40+
To get all children of a task, not only first-level child tasks, use the [`eachTask()`](api/method/eachtask.md) method and pass the parent task ID as the second parameter:
4041

4142
~~~js
42-
const children = [];
43-
// iterate through all children of a task
44-
gantt.eachTask(function(child){
45-
children.push(child)
43+
const childTasks = [];
44+
45+
// Iterate through all children of a task.
46+
gantt.eachTask((childTask) => {
47+
childTasks.push(childTask);
4648
}, 11);
4749
~~~
4850

4951
## Checking if a task has a child
5052

51-
To check if some task has a child task, use the [hasChild](api/method/haschild.md) method:
53+
To check whether a task has a child task, use the [`hasChild()`](api/method/haschild.md) method:
5254

53-
~~~js
54-
var data = {
55-
tasks:[
56-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18,
57-
open:true},
58-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
59-
parent:"p_1"},
60-
{id:"t_2", text:"Task #2", start_date:"11-04-2020", duration:8,
61-
parent:"p_1"}
62-
]
55+
~~~js {11-12}
56+
const taskData = {
57+
tasks: [
58+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18, open: true },
59+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" }
60+
]
6361
};
6462
gantt.init("gantt_here");
65-
gantt.parse(data);
66-
67-
gantt.hasChild("p_1"); //-> true /*!*/
68-
gantt.hasChild("t_1"); //-> false /*!*/
63+
gantt.parse(taskData);
64+
65+
gantt.hasChild("p_1"); // -> true
66+
gantt.hasChild("t_1"); // -> false
6967
~~~
7068

7169
## Next task in a tree
7270

73-
To get the object of a task next to the specified one, use the [getNext](api/method/getnext.md) method:
71+
To get the ID of the task next to the specified one, use the [`getNext()`](api/method/getnext.md) method:
7472

75-
~~~js
76-
var data = {
77-
tasks:[
78-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18,
79-
open:true},
80-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
81-
parent:"p_1"},
82-
{id:"t_2", text:"Task #2", start_date:"11-04-2020", duration:8,
83-
parent:"p_1"}
84-
]
73+
~~~js {11-13}
74+
const taskData = {
75+
tasks: [
76+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18, open: true },
77+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" },
78+
{ id: "t_2", text: "Task #2", start_date: "2027-04-11", duration: 8, parent: "p_1" }
79+
]
8580
};
8681
gantt.init("gantt_here");
87-
gantt.parse(data);
88-
89-
gantt.getNext("p_1"); -> "t_1" /*!*/
90-
gantt.getNext("t_1"); -> "t_2" /*!*/
91-
gantt.getNext("t_2"); -> null /*!*/
92-
~~~
82+
gantt.parse(taskData);
9383

94-
Note, the gantt considers tasks regardless of the tree level
84+
gantt.getNext("p_1"); // -> "t_1"
85+
gantt.getNext("t_1"); // -> "t_2"
86+
gantt.getNext("t_2"); // -> null
87+
~~~
9588

89+
Gantt considers tasks regardless of the tree level.
9690

9791
## Previous task in a tree
9892

99-
To get the object of a task next to the specified one, use the [getPrev](api/method/getprev.md) method:
93+
To get the ID of the task previous to the specified one, use the [`getPrev()`](api/method/getprev.md) method:
10094

101-
~~~js
102-
var data = {
103-
tasks:[
104-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18,
105-
open:true},
106-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
107-
parent:"p_1"},
108-
{id:"t_2", text:"Task #2", start_date:"11-04-2020", duration:8,
109-
parent:"p_1"}
110-
]
95+
~~~js {11-13}
96+
const taskData = {
97+
tasks: [
98+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18, open: true },
99+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" },
100+
{ id: "t_2", text: "Task #2", start_date: "2027-04-11", duration: 8, parent: "p_1" }
101+
]
111102
};
112103
gantt.init("gantt_here");
113-
gantt.parse(data);
114-
115-
gantt.getPrev("p_1"); -> null /*!*/
116-
gantt.getPrev("t_1"); -> "p_1" /*!*/
117-
gantt.getPrev("t_2"); -> "t_1" /*!*/
118-
~~~
104+
gantt.parse(taskData);
119105

120-
Note, the gantt considers tasks regardless of the tree level
106+
gantt.getPrev("p_1"); // -> null
107+
gantt.getPrev("t_1"); // -> "p_1"
108+
gantt.getPrev("t_2"); // -> "t_1"
109+
~~~
121110

111+
Gantt considers tasks regardless of the tree level.
122112

123113
## Siblings of a task
124114

125-
To get siblings of the specified task, use the [getSiblings](api/method/getsiblings.md) method:
115+
To get the siblings of the specified task, use the [`getSiblings()`](api/method/getsiblings.md) method:
126116

127-
~~~js
128-
var data = {
129-
tasks:[
130-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18,
131-
open:true},
132-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
133-
parent:"p_1"},
134-
{id:"t_2", text:"Task #2", start_date:"11-04-2020", duration:8,
135-
parent:"p_1"}
136-
]
117+
~~~js {11}
118+
const taskData = {
119+
tasks: [
120+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18, open: true },
121+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" },
122+
{ id: "t_2", text: "Task #2", start_date: "2027-04-11", duration: 8, parent: "p_1" }
123+
]
137124
};
138125
gantt.init("gantt_here");
139-
gantt.parse(data);
140-
141-
gantt.getSiblings("t_1"); -> ["t_1", "t_2] /*!*/
142-
~~~
126+
gantt.parse(taskData);
143127

128+
gantt.getSiblings("t_1"); // -> ["t_1", "t_2"]
129+
~~~
144130

145131
## Next sibling of a task
146132

147-
To get the next sibling of the specified task, use the [getNextSibling](api/method/getnextsibling.md) method:
133+
To get the next sibling of the specified task, use the [`getNextSibling()`](api/method/getnextsibling.md) method:
148134

149-
~~~js
150-
var data = {
151-
tasks:[
152-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18,
153-
open:true},
154-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
155-
parent:"p_1"},
156-
{id:"t_2", text:"Task #2", start_date:"11-04-2020", duration:8,
157-
parent:"p_1"}
158-
]
135+
~~~js {11-12}
136+
const taskData = {
137+
tasks: [
138+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18, open: true },
139+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" },
140+
{ id: "t_2", text: "Task #2", start_date: "2027-04-11", duration: 8, parent: "p_1" }
141+
]
159142
};
160143
gantt.init("gantt_here");
161-
gantt.parse(data);
162-
163-
gantt.getNextSibling("t_1"); -> "t_2" /*!*/
164-
gantt.getNextSibling("t_2"); -> null (if no next sibling) /*!*/
165-
~~~
144+
gantt.parse(taskData);
166145

146+
gantt.getNextSibling("t_1"); // -> "t_2"
147+
gantt.getNextSibling("t_2"); // -> null
148+
~~~
167149

168150
## Previous sibling of a task
169151

170-
To get the previous sibling of the specified task, use the [getPrevSibling](api/method/getprevsibling.md) method:
152+
To get the previous sibling of the specified task, use the [`getPrevSibling()`](api/method/getprevsibling.md) method:
171153

172-
~~~js
173-
var data = {
174-
tasks:[
175-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18,
176-
open:true},
177-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
178-
parent:"p_1"},
179-
{id:"t_2", text:"Task #2", start_date:"11-04-2020", duration:8,
180-
parent:"p_1"}
181-
]
154+
~~~js {11-12}
155+
const taskData = {
156+
tasks: [
157+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18, open: true },
158+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" },
159+
{ id: "t_2", text: "Task #2", start_date: "2027-04-11", duration: 8, parent: "p_1" }
160+
]
182161
};
183162
gantt.init("gantt_here");
184-
gantt.parse(data);
185-
186-
gantt.getPrevSibling("t_2"); -> "t_1" /*!*/
187-
gantt.getPrevSibling("t_1"); -> null (if no previous sibling) /*!*/
188-
~~~
163+
gantt.parse(taskData);
189164

165+
gantt.getPrevSibling("t_2"); // -> "t_1"
166+
gantt.getPrevSibling("t_1"); // -> null
167+
~~~

0 commit comments

Comments
 (0)