Here I am generating a dynamic tree structure using my json and angular2 - tree component and till every thing is fine now, I am unable to generate the selection events ad when ever we select the events that particular names have to be selected as objects if child is there and I tried this URL and in the documentation also I didn't find any methods for getting the selected valules so please, suggest me on that.
https://angular2-tree.readme.io/docs
below is my code
options = {
useCheckbox: true
};
nodes;
data = {
"info": {
"laptop": {
},
"config": {
"properties": {
"ram": {
},
"processor": {
},
"hdd": {
}
}
},
"link": {
},
"name": {
},
"company": {
"properties": {
"model": {
},
"maker": {
"type": "integer"
},
"country": {
"type": "text"
},
"enterprise": {
}
}
}
}
};
check(){
const results = Object.keys(this.data.info).map(k => ({
name: k,
children: this.data.info[k].properties
? Object.keys(this.data.info[k].properties).map(kk => ({ name: kk }))
: []
}));
this.nodes = results;
}
.html code
<button type="button" (click)="check()">click</button>
<hr>
<input id="filter" #filter (keyup)="tree.treeModel.filterNodes(filter.value)" placeholder="filter nodes" />
<button (click)="tree.treeModel.clearFilter()">Clear Filter</button>
<tree-root #tree [focused]="true" [options]="options" [nodes]="nodes"></tree-root>
stackblitz link
https://stackblitz.com/edit/angular-kh28sg
I don't know if there a better way You can access to the selected nodes using tree.treeModel.selectedLeafNodeIds. You must before check is isSelected or not See the docs/API
For example if you has a button
<!--I like pass as argument the property "treeModel" of #tree ("reference variable")-->
<button (click)="click(tree.treeModel)">sendData</button>
<tree-root #tree [focused]="true" [options]="options" [nodes]="nodes"></tree-root>
Your function click can be like
click(tree:TreeModel)
{
console.log(tree.activeNodes);
Object.keys(tree.selectedLeafNodeIds).forEach(x=>{
let node:TreeNode=tree.getNodeById(x);
if (node.isSelected)
{
console.log("Selected:",node.data.name,
"Parent:",node.parent.data.name);
}
})
}
NOTE: I forked your stackblitz
Updated create an object with the response
click(tree: TreeModel) {
console.log(tree.activeNodes);
let result: any = {} //<--declare a variable
Object.keys(tree.selectedLeafNodeIds).forEach(x => {
let node: TreeNode = tree.getNodeById(x);
if (node.isSelected) {
console.log("Selected:", node.data.name,
"Parent:", node.parent.data.name);
if (node.parent.data.name) //if the node has parent
{
if (!result[node.parent.data.name]) //If the parent is not in the object
result[node.parent.data.name] = {} //create
result[node.parent.data.name][node.data.name] = true;
}
else {
if (!result[node.data.name]) //If the node is not in the object
result[node.data.name] = {} //create
}
}
})
console.log(result);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With