HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function() {
2
3
var tree = anychart.data.tree([
4
{name: "Node 1", id: "1"},
5
{name: "Node 2", id: "2"},
6
{name: "Node 3", id: "3"},
7
{name: "Node 4", id: "4"},
8
{name: "Node 5", id: "5"}
9
], anychart.enums.TreeFillingMethod.AS_TABLE);
10
11
var stage = anychart.graphics.create("container");
12
13
// create Data Grid
14
treeDataGrid = anychart.standalones.dataGrid();
15
16
// set Data Tree
17
treeDataGrid.data(tree).headerHeight(20);
18
19
// create button for Parent node
20
treeDataGrid.listen("signal", treeDataGrid.draw, false, treeDataGrid);
21
22
// set style for second column
23
treeDataGrid.column(1).cellTextSettingsOverrider(labelTextSettingsOverrider);
24
25
// create new button
26
var triggerButton = document.createElement("div");
27
28
// set button style
29
triggerButton.style.top = "5px";
30
triggerButton.style.right = "5px";
31
triggerButton.style.width = "auto";
32
triggerButton.style.height = "auto";
33
triggerButton.style.backgroundColor = "#444444";
34
triggerButton.style.color = "white";
35
triggerButton.style.position = "absolute";
36
triggerButton.style.zIndex = 2;
37
triggerButton.style.transition = "0.5s";
38
triggerButton.style.textAlign = "center";
39
triggerButton.style.border = "3px solid #444444";
40
triggerButton.style.borderRadius = "7px 7px 7px 7px";
41
triggerButton.style.fontSize = "18px";
42
triggerButton.style.cursor = "pointer";
43
triggerButton.style.MozUserSelect= "none";
44
triggerButton.style.KhtmlUserSelect= "none";
45
triggerButton.style.WebkitUserSelect= "none";
46
triggerButton.style.userSelect= "none";
47
triggerButton.innerHTML = "Remove";
48
triggerButton.onclick = function() {
49
removePoint();
50
};
51
52
// append button to container
53
container.appendChild(triggerButton);
54
55
// draw chart
56
treeDataGrid.container(stage).top(triggerButton.offsetHeight + 7).width("100%").draw();
57
58
// set container height
59
treeDataGrid.container().height(fullChildrenHeight()+treeDataGrid.top()+treeDataGrid.headerHeight()+1);
60
61
var title = anychart.standalones.title();
62
title.parentBounds(0, 0, "100%", 30)
63
.text("Click on Button to Remove First Element")
64
.container(stage)
65
.draw();
66
67
// custom variable with the number of children
68
var childNum = tree.numChildren();
69
70
function removePoint(){
71
// check if there any children
72
if (childNum>0){
73
tree.removeChildAt(0); // remove child
74
75
// change container size for the sake of visual appearance
76
treeDataGrid.container().height(fullChildrenHeight()+treeDataGrid.top()+treeDataGrid.headerHeight()+1);
77
}
78
childNum--; // reduce number of children in custom variable
79
}
80
81
// get height of all items in the tree
82
function fullChildrenHeight () {
83
var height = 0;
84
var traverser = tree.getTraverser();
85
traverser.reset();
86
while(traverser.advance()){
87
88
// get an item
89
var currentItem = traverser.current();
90
91
// get height of the item
92
var currentHeight = currentItem.get(anychart.enums.GanttDataFields.ROW_HEIGHT);
93
94
// if item height is undefined
95
if (currentHeight !== void 0){
96
height += (currentHeight + 1);
97
} else {
98
// if height of current item is undefined, default height is 20px + 1px row space
99
height +=21;
100
}
101
}
102
return height;
103
}
104
});
105
106
// style setter
107
function labelTextSettingsOverrider(label, dataItem) {
108
if (!dataItem.getParent()) {
109
label.fontColor("#0055aa").fontWeight("bold").fontSize(12).fontStyle("italic");
110
} else {
111
if (dataItem.numChildren()) {
112
label.fontColor("#559955").fontWeight("bold").fontStyle("italic");
113
}
114
}
115
}