unable to select all checkboxes in tree using angular2-tree on init

Question

Objective : i have a button named "feed data" so when ever i click it the data will be loaded i mean the tree with checkboxes here my requirement is when ever i click it along with data all the check boxes have to be checked on init i tried using

 this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));

but it is not working below is my code

 click(tree: TreeModel) {

    this.arrayData = [];

    let result: any = {};
    let rs = [];

    console.log(tree.selectedLeafNodeIds);





    Object.keys(tree.selectedLeafNodeIds).forEach(x => {


      let node: TreeNode = tree.getNodeById(x);
      // console.log(node);


      if (node.isSelected) {

        if (node.parent.data.name) //if the node has parent
        {
          rs.push(node.parent.data.name + '.' + node.data.name);
          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
          rs.push(node.data.name);
        }


      }
    })
    this.arrayData = rs;
    tree.selectedLeafNodeIds = {};

  }

  selectAllNodes() {
    this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));
    //  firstNode.setIsSelected(true);

  }

  onTreeLoad(){
    console.log('tree');
  }



  feedData() {

    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;





  }

  feedAnother() {



    const results = Object.keys(this.dataa.info).map(k => ({
      name: k,
      children: this.dataa.info[k].properties
        ? Object.keys(this.dataa.info[k].properties).map(kk => ({ name: kk }))
        : []
    }));
    this.nodes = results;


  }

  onActivate(event) {
    this.selectedDataList.push(event.node.data);
    console.log(this.selectedDataList)
  }

  onDeactivate(event) {
    const index = this.selectedDataList.indexOf(event.node.data);
    this.selectedDataList.splice(index, 1);
    console.log(this.selectedDataList)
  }

below is my stackblitz https://stackblitz.com/edit/angular-hrbppy

Munim Munna · Accepted Answer · 2019-06-10 10:31:07Z

3

Use updatedata and initialized event to update the tree view to check all checkboxes.

app.component.html

<tree-root #tree *ngIf ="nodes" [nodes]="nodes" [options]="options" [focused]="true"
    (initialized)="onTreeLoad()"
    (updateData)="updateData()"
    (select)="onActivate($event)"
    (deselect)="onDeactivate($event)">
</tree-root>

It'll initiate tree-root component only if nodes variable is available, then in the initialized and updateData event call selectAllNodes method to select all checkboxes.

app.component.ts

updateData() {
  this.selectAllNodes();
}

onTreeLoad(){
  this.selectAllNodes();
}

Refer to this slackblitz for working example.

edited Jun 10, 2019 at 10:31

Munim Munna

17.6k6 gold badges31 silver badges60 bronze badges

answered Jun 9, 2019 at 13:17

Raghul Selvam

3152 silver badges6 bronze badges

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

2 Comments

Dexter Over a year ago

But here the click(tree.treeModel) is not working after updating select all

Raghul Selvam Over a year ago

this is because we cannot use template variables when the structural directives used in the element, now the code updated to satisfy all functionalities. this might help to solve your problem refer : stackblitz.com/edit/angular-jfgt9j

Eliseo · Accepted Answer · 2019-06-09 16:55:54Z

2

+50

just, in your function feed data call to your function this.selectAllNodes() enclosed in a setTimeout. You can see your forked stackblitz

setTimeout(()=>{
   this.selectAllNodes()
})

NOTE: I see in your code you try to control in diferents ways the items selected. I simplified using a recursive function.

In this.treeComp.treeModel.selectedLeafNodeIds we have the items that are changed, so

  getAllChecked()
  {
    const itemsChecked=this.getData(
              this.treeComp.treeModel.selectedLeafNodeIds,null)
    console.log(itemsChecked);
  }

  getData(nodesChanged,nodes) {
    nodes=nodes||this.treeComp.treeModel.nodes
    let data: any[] = []
      nodes.forEach((node: any) => {
        //in nodesChanged we has object like {1200002:true,123132321:false...}
        if (nodesChanged[node.id]) //can be not changed, and then it's null because
                           //it's not in object or can be changed to false
          data.push({id:node.id,name:node.name})
          //or data.push(node.name); //if only need the "name"
          if (node.children)
              data=[...data,...this.getData(nodesChanged,node.children)]
      }
      );
    return data
  }

Updated I updated the function getData to include the "parent" of the node, but looking the code of @Raghul selvam, his function like me more than mine.

getData(nodesChanged,nodes,prefix) {
    nodes=nodes||this.treeComp.treeModel.nodes
    let data: any[] = []
      nodes.forEach((node: any) => {
        if (nodesChanged[node.id])
          data.push(prefix?prefix+"."+node.name:node.name)
          if (node.children)
              data=[...data,...this.getData(nodesChanged,node.children,prefix?prefix+"."+node.name:node.name)]
      }
      );
    return data
  }

And call it as

this.getData(this.treeComp.treeModel.selectedLeafNodeIds,null,"")

edited Jun 9, 2019 at 16:55

answered Jun 9, 2019 at 12:25

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

2 Comments

Dexter Over a year ago

ok but i used the get the selected data in the below format laptop config.ram config.processor config.hdd link name company.model company.maker company.country company.enterprise

Eliseo Over a year ago

I u`pdated my answer, but the code of @raghulselvam it's ok too. The idea is not use an auxiliar array, it's not necesary

Giwrgos Lampadaridis · Accepted Answer · 2019-06-09 09:40:53Z

2

You could add this in your onTreeLoad function. You could add a boolean flag(treeLoaded) for tracking if the tree has loaded or not.

onTreeLoad(tree){

   this.selectAllNodes();
    this.treeLoaded = true;
  }

answered Jun 9, 2019 at 9:40

Giwrgos Lampadaridis

3261 silver badge5 bronze badges

1 Comment

Dexter Over a year ago

can u test this with my stackblitz ?

Collectives™ on Stack Overflow

unable to select all checkboxes in tree using angular2-tree on init

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related