How to get the checked tree structure values using angular2-tree plugin

Question

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

Eliseo · Accepted Answer · 2018-12-12 07:49:02Z

7

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);
  }

edited Dec 12, 2018 at 7:49

answered Dec 11, 2018 at 19:49

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dexter Over a year ago

can we bring selected response as single object check my stack i think there is some issue when child is not there then parent name is coming in the child stackblitz.com/edit/angular-uyg3gw

Eliseo Over a year ago

I don't know how your single object will be. I updated my answer to show one

Dexter Over a year ago

ok thats the thing i was looking for a small final doubt can after getting the parent can it be made like laptop,config.ram,config.processor, etc ?

Eliseo Over a year ago

If you want an array of strings it's more ease: if has parent, push node.parent.data.name+"."+node.data.name, else push node.data.name

Dexter Over a year ago

i need your help in tree it is having some issue. the issue is when ever u push a data and again if u push a data then it is giving me isSelected error

EddieBaby · Accepted Answer · 2019-06-28 14:53:55Z

I couldn't get the accepted answer to work, my tree.getNodeById(x) would always return null

So I used the action mapping:

Add IActionMapping to your Tree component

actionMapping: IActionMapping = {
    // ...
    checkboxClick: (tree, node) => {
        node.data.checked = !node.data.checked;
        this.setCheckedNodes(node.id, node.data.checked); 
      }

 }

Method to store the values in a service:

private setCheckedNodes(id: string, checked: boolean) {
    if (!this.treeService.selectedIds) {
      this.treeService.selectedIds = new Array<[string, boolean]>();
    }

    const checkedNode = this.treeService.selectedIds.find(cn => cn[0] === id);
    if (checkedNode) {
      if (checkedNode[1] !== checked) {
        checkedNode[1] = checked;
        this.treeService.selectedIds[id] = checkedNode;
      }
    } else {
      this.treeService.selectedIds.push([id, checked]);
    }

  }

Then on some select event get or emit the values stored in the service:

export class treeService {
    // ...
    public selectedIds: Array<[string, boolean]>;
  }

Probably want to clear them afterwards

Collectives™ on Stack Overflow

How to get the checked tree structure values using angular2-tree plugin

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related