Angular material tree checkbox with real example

Question

I've seen almost all examples about how to work with angular material tree checkbox component. for example official example and this.
these examples show us a string array structure as a data was bonded. but how can we transform a nested complex object array to this component?

My data structure:

As you can see the data says to the client which items of the checkbox must be set as ticked. and 'Id' must be bind to the tree.

When I replace my 'TREE-DATA' with official example 'TREE-DATA', I see the following tree as result.
I suppose we need to change 'buildFileTree()' or 'transformer()' methods in official example.

Angular(7.0.0), Angular Material(6.4.7)

KoKo · Accepted Answer · 2023-04-21 06:15:00Z

5

Finally I solved this problem and I wrote a sample in this place

How the problem was solved?
I did some changes in 'buildFileTree()' and 'transformer()' methods. you can see the changes in the following code:

buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
  const item = obj[key];
  const node = new TodoItemNode();
  node.label = obj[key].name;
  node.id = obj[key].id;
  node.isChecked=  obj[key].isChecked;
  node.claimId=  obj[key].claimId;
  node.isPlanType=  obj[key].isPlanType;

  if (item != null) {
    if (typeof item === 'object'  && item.children!= undefined) { 


      node.children = this.buildFileTree(item.children, level + 1);
    } else {
      node.label = item.name;
    }
  }

  return accumulator.concat(node);
}, []);}

  transformer = (node: TodoItemNode, level: number) => {
const existingNode = this.nestedNodeMap.get(node);
const flatNode = existingNode && existingNode.label === node.label
    ? existingNode
    : new TodoItemFlatNode();
flatNode.label = node.label;
flatNode.level = level;
flatNode.id=node.id;
 flatNode.isChecked = node.isChecked;
 flatNode.claimId = node.claimId;
 flatNode.isPlanType = node.isPlanType;
flatNode.expandable = !!node.children;
this.flatNodeMap.set(flatNode, node);
this.nestedNodeMap.set(node, flatNode);
return flatNode;  }

edited Apr 21, 2023 at 6:15

answered Sep 5, 2020 at 9:40

KoKo

4713 gold badges9 silver badges27 bronze badges

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

1 Comment

Bhargav Patel Over a year ago

I gave it a shot, and it initially worked perfectly. However, I encountered an issue when I needed to have certain checkboxes pre-selected by default. In cases where a user attempted to update these fields, I wanted to display the previously selected values as checked checkboxes. I tried to explore methods but no luck found.

Collectives™ on Stack Overflow

Angular material tree checkbox with real example

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related