Skip to content

Commit 6b5cd30

Browse files
AlexKlimenkovAlexKlimenkov
authored
Merge pull request #69 from mlakatkou/GS-3309
[update] tree-column article
2 parents c25a9c7 + c31900d commit 6b5cd30

1 file changed

Lines changed: 57 additions & 75 deletions

File tree

‎docs/guides/tree-column.md‎

Lines changed: 57 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,42 @@ sidebar_label: "Configuring the Tree Column"
55

66
# Configuring the Tree Column
77

8-
To know about available tree-related methods, please, refer to the [Task Parent/Child](guides/task-tree-operations.md) article.
8+
To learn about available tree-related methods, refer to the [Task Parent/Child](guides/task-tree-operations.md) article.
99

1010
## Expanding/collapsing a task branch
1111

12-
- To open a task branch, use the [open](api/method/open.md) method:
12+
- To open a task branch, use the [`open()`](api/method/open.md) method:
1313

14-
~~~js
15-
var data = {
16-
tasks:[
17-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
18-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
19-
parent:"p_1"}
20-
]};
21-
gantt.open("p_1"); /*!*/
14+
~~~js {7}
15+
const data = {
16+
tasks: [
17+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18 },
18+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" }
19+
]
20+
};
21+
gantt.open("p_1");
2222
~~~
2323

24-
- To close a task branch, use the [close](api/method/close.md) method:
24+
- To close a task branch, use the [`close()`](api/method/close.md) method:
2525

26-
~~~js
27-
var data = {
28-
tasks:[
29-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
30-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
31-
parent:"p_1"}
32-
]};
33-
gantt.close("p_1"); /*!*/
26+
~~~js {7}
27+
const data = {
28+
tasks: [
29+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18 },
30+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" }
31+
]
32+
};
33+
gantt.close("p_1");
3434
~~~
3535

3636
## Expanding/collapsing several branches
3737

38-
If you need to open/close several task branches, the fastest way is to programatically set the corresponding boolean value (true - to open, false - to close)
39-
to the *.$open* property of the needed tasks and then redraw the gantt.
38+
If you need to open or close several task branches, the fastest way is to programmatically set the corresponding boolean value (`true` to open, `false` to close) to the `.$open` property of the needed tasks and then redraw Gantt.
4039

4140
- expanding all tasks:
4241

4342
~~~js
44-
gantt.eachTask(function(task){
43+
gantt.eachTask((task) => {
4544
task.$open = true;
4645
});
4746
gantt.render();
@@ -50,7 +49,7 @@ gantt.render();
5049
- collapsing all tasks:
5150

5251
~~~js
53-
gantt.eachTask(function(task){
52+
gantt.eachTask((task) => {
5453
task.$open = false;
5554
});
5655
gantt.render();
@@ -62,101 +61,84 @@ If you want to collapse/expand all tasks at once with a button, go to the [How t
6261

6362
## Getting the children of a task
6463

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

67-
~~~js
68-
var data = {
69-
tasks:[
70-
{id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
71-
{id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
72-
parent:"p_1"}
73-
]};
74-
gantt.getChildren("p_1");//->["t_1"] /*!*/
66+
~~~js {7}
67+
const data = {
68+
tasks: [
69+
{ id: "p_1", text: "Project #1", start_date: "2027-04-01", duration: 18 },
70+
{ id: "t_1", text: "Task #1", start_date: "2027-04-02", duration: 8, parent: "p_1" }
71+
]
72+
};
73+
gantt.getChildren("p_1"); // -> ["t_1"]
7574
~~~
7675

77-
*To see more tree-related methods, please, read the [Task Parent/Child](guides/task-tree-operations.md) article.*
76+
*To see more tree-related methods, read the [Task Parent/Child](guides/task-tree-operations.md) article.*
7877

7978
## Changing the tree's icons
8079

8180
### Parent items
82-
To set the icon for the parent items, use the [grid_folder](api/template/grid_folder.md) template:
81+
To set the icon for the parent items, use the [`grid_folder`](api/template/grid_folder.md) template:
8382

8483
~~~js
85-
gantt.templates.grid_folder = function(item) {
86-
return "<div class='gantt_tree_icon gantt_folder_" +
87-
(item.$open ? "open" : "closed") + "'></div>";
88-
};
84+
gantt.templates.grid_folder = (item) => `<div class="gantt_tree_icon gantt_folder_${item.$open ? "open" : "closed"}"></div>`;
8985
~~~
9086

91-
9287
### Child items
93-
To set the icon for the child items, use the [grid_file](api/template/grid_file.md) template:
88+
To set the icon for the child items, use the [`grid_file`](api/template/grid_file.md) template:
9489

9590
~~~js
96-
gantt.templates.grid_file = function(item) {
97-
return "<div class='gantt_tree_icon gantt_file'></div>";
98-
};
91+
gantt.templates.grid_file = (item) => `<div class="gantt_tree_icon gantt_file"></div>`;
9992
~~~
10093

101-
10294
### Open/close sign
103-
To set the icon for the open/close sign, use the [grid_open](api/template/grid_open.md) template:
95+
To set the icon for the open/close sign, use the [`grid_open`](api/template/grid_open.md) template:
10496

10597
~~~js
106-
gantt.templates.grid_open = function(item) {
107-
return "<div class='gantt_tree_icon gantt_" +
108-
(item.$open ? "close" : "open") + "'></div>";
109-
};
98+
gantt.templates.grid_open = (item) => `<div class="gantt_tree_icon gantt_${item.$open ? "close" : "open"}"></div>`;
11099
~~~
111100

112-
113101
## Setting the indent of children in a branch
114102

115-
To set the indent of child tasks in a branch, use the [grid_indent](api/template/grid_indent.md) template (change the **width** CSS property):
103+
To set the indent of child tasks in a branch, use the [`grid_indent`](api/template/grid_indent.md) template and change the `width` CSS property:
116104

117105
~~~js
118-
gantt.templates.grid_indent="function(task){"
119-
return "<div style='width:20px; float:left; height:100%'></div>"
120-
};
106+
gantt.templates.grid_indent = (task) => `<div style="width:20px; float:left; height:100%"></div>`;
121107
~~~
122108

123-
124109
## Adding checkboxes to tree nodes
125110

126-
To add the checkboxes (or any other HTML content) to tree nodes, use the [grid_blank](api/template/grid_blank.md) template:
111+
To add checkboxes or any other HTML content to tree nodes, use the [`grid_blank`](api/template/grid_blank.md) template:
127112

128113
~~~js
129-
gantt.templates.grid_blank="function(task){"
130-
return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"
131-
};
114+
gantt.templates.grid_blank = (task) => `<input id="ch1" type="checkbox" onclick="someFunc()">`;
132115
~~~
133116

134-
135117
## Setting the template of tree nodes
136118

137-
To set the template for tree nodes, use the **template** attribute in the [columns](api/config/columns.md) property.
119+
To set the template for tree nodes, use the `template` attribute in the [columns](api/config/columns.md) property.
138120

139-
The return value of the **template'**s function will be added as an inner HTML. That's why, you can use any HTML structures in the attribute.
121+
The return value of the `template` function will be added as inner HTML. That is why you can use any HTML structures in the attribute.
140122

141123
:::note
142-
Note, if you don't use [dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) to [integrate with the server side](guides/server-side.md), you have to sanitize the data
143-
you load into the Gantt chart in order to prevent possible XSS attacks ([dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) does it automatically)
124+
If you don't use [dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) to [integrate with the server side](guides/server-side.md), you have to sanitize the data you load into the Gantt chart in order to prevent possible XSS attacks. [dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) does it automatically.
144125
:::
145126
~~~js
146-
gantt.config.columns="["
147-
{name:"text", label:"Task name", tree:true, width:230, template:myFunc },
148-
{name:"start_date", label:"Start time", align: "center" },
149-
{name:"duration", label:"Duration", align: "center" }
127+
gantt.config.columns = [
128+
{ name: "text", label: "Task name", tree: true, width: 230, template: taskTemplate },
129+
{ name: "start_date", label: "Start time", align: "center" },
130+
{ name: "duration", label: "Duration", align: "center" }
150131
];
151132
gantt.init("gantt_here");
152-
153-
function myFunc(task){
154-
if(task.priority ==1)
155-
return "<div class='important'>"+task.text+" ("+task.users+") </div>";
156-
return task.text+" ("+task.users+")";
133+
134+
function taskTemplate(task) {
135+
if (task.priority === 1) {
136+
return `<div class="important">${task.text} (${task.users})</div>`;
137+
}
138+
139+
return `${task.text} (${task.users})`;
157140
};
158141
~~~
159142

160143

161-
[Template for tree nodes](https://docs.dhtmlx.com/gantt/samples/04_customization/05_tree_template.html)
162-
144+
**Related sample**: [Template for tree nodes](https://docs.dhtmlx.com/gantt/samples/04_customization/05_tree_template.html)

0 commit comments

Comments
 (0)