Angular-tree-component how to capture selected nodes through checkbox selection

Question

I'm using angular-tree-component to generate a tree with checkbox options. HTML

<tree-root [nodes]="nodes" [options]="options">
      </tree-root>

Typescript:

import { ITreeOptions } from 'angular-tree-component';
import { Component } from '@angular/core';

export class myComponent {
nodes = [
    {
      name: 'root1',
      children: [
        { name: 'root1_child1' },
        {
          name: 'root1_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    },
    {
      name: 'root2',
      children: [
        { name: 'root2_child1' },
        {
          name: 'root2_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    }
  ];

  options: ITreeOptions = {
    useCheckbox: true
  };

  optionsDisabled: ITreeOptions = {
    useCheckbox: true,
    useTriState: false
  };

So I'm able to select tree nodes (including children) but not able to find any way where I can capture all the selected (checked) nodes and display on another box.

Zoe - Save the data dump · Accepted Answer · 2018-05-24 19:11:20Z

5

You can use "event.treeModel.selectedLeafNodeIds" to get the selected node in tree,

Example:

<tree-root [nodes]="treeNode" (select)="onSelect($event)"
    (deselect)="onDeselect($event)" [options]="options"></tree-root>

this.selectedTreeList = Object.entries(event.treeModel.selectedLeafNodeIds)
     .filter(([key, value]) => {
            return (value === true);
      }).map((node) => node[0]);

edited May 24, 2018 at 19:11

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered May 24, 2018 at 19:10

nitin

1562 silver badges13 bronze badges

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

8 Comments

Geancarlo Murillo Over a year ago

It works, also i'm getting an array of numbers and not of objects...something like: ["2860399510223", "3897698631848", "9993577998256", "5009898083230", "3866878811722", "1313097673070"] ....how can I get the objects and not this ?

nitin Over a year ago

@GeancarloMurillo you can remove the last map((node) => node[0]); from the above sample code, it will return you an array of objects :)

Geancarlo Murillo Over a year ago

Yep, I solved it with getNodeById with the selectedTreeList :) ...thanks

Madpop Over a year ago

@GeancarloMurillo could u tell me what u mentioned in the onSelect event and how to get that value ?

nitin Over a year ago

@Dexter, there are two way we can get the selected item of the tree list, 1) Only current selected item, selectedItem: any; onSelect(event) { this.selectedItem = event.node.data; } 2) Get all selected items in one shot, also given in above example, this.selectedTreeList = Object.entries(event.treeModel.selectedLeafNodeIds) .filter(([key, value]) => { return value; });

|

Sachin Kale · Accepted Answer · 2019-04-05 10:09:08Z

3

With reference to above answer to get objects you can use

  Object.entries(this.treeModel.selectedLeafNodeIds)
  .filter(([key, value]) => {
    return (value === true);
  })
  .map((id) => {
    let node = this.treeModel.getNodeById(id[0]);
    return node;
  });

answered Apr 5, 2019 at 10:09

Sachin Kale

891 silver badge1 bronze badge

Comments

ammad khan · Accepted Answer · 2020-06-16 06:58:59Z

0

You can do this by using (select) and (deselect) events. here it is a little example.

onSelect(event) {
    try {

      let pushdata: any = [];
      pushdata.push(event.node.data);

      console.log(this.TreeViewData);
    } catch (e) {
      console.log(e.message)
    }
  }

and same as in deselect even you can capture deselected nodes

ondeSelect(event) {
        try {

          let pushdata: any = [];
          pushdata.push(event.node.data);

          console.log(this.TreeViewData);
        } catch (e) {
          console.log(e.message)
        }
      }

Event.node.data will return a list of the array off all the properties you binded.

answered Jun 16, 2020 at 6:58

ammad khan

1,1641 gold badge11 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular-tree-component how to capture selected nodes through checkbox selection

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related