Tree like checkbox and search filter implementation in angular?

Question

What I have:

I have implemented a tree like structure with checkbox selection and search filter. The hierarchy is of fixed 3 levels(Parent->Intermediate->Child). Selecting checkboxes is working perfectly fine(with all feature including indeterminate sign on checkbox when some of nodes selected or tick sign when all childs are selected).

I have also applied a search filter on the tree structured data with a custom angular pipe.

The problem happens when I apply search filter, the selection of checkboxes misbehaves. Also it do not get selected. The indeterminate sign also not working as expected.

A very good reference is this: https://angular2-tree.readme.io/docs/filtering, although I can't use this library, but I wanted to have exact similar feature.

My requirement is that user should able to filter the nodes and select the node

What I tried:

I have created this Stackblitz link. Please have a look at this.

Any help or suggestion would be much appreciated. Thanks!

blitz is great, but when asking a question, you should include most relevant code in your question with some brief outline of what the pieces are doing — bryan60
– bryan60, Commented Apr 13, 2020 at 18:00
I'm unclear on what your actual goal / expected behavior is here. What should happen to the data and the checkboxes when something is checked? — bryan60
– bryan60, Commented Apr 13, 2020 at 18:05
@bryan60 As I mentioned in the question, I want to implement similar feature like this angular2-tree.readme.io/docs/filtering. Although my code is very redundant(how better can I optimize the code), also when I search for any node and select it after clearing the input selection goes away. — Dungeon
– Dungeon, Commented Apr 13, 2020 at 18:09
A similar library isn't as helpful as you explaining your expected behavior and requirements. Providing that will get you the best answers possible. — bryan60
– bryan60, Commented Apr 13, 2020 at 18:11

Eliseo · Accepted Answer · 2020-04-14 16:56:10Z

4

why not use a mat-tree? based in this SO about tree-view

We need two recursive functions:

setChildOk(text: string, node: any) {
    node.forEach(x => {
      x.ok = x.name.indexOf(text) >= 0;
      if (x.parent) this.setParentOk(text, x.parent,x.ok);
      if (x.children) this.setChildOk(text, x.children);
    });
  }
  setParentOk(text, node,ok) {
    node.ok = node.ok || ok || node.name.indexOf(text)>=0;
    if (node.parent) this.setParentOk(text, node.parent,node.ok);
  }

We can add an input "search" and make a function

 <input matInput [ngModel]="search" 
       (ngModelChange)="search=$event;setChildOk($event,dataSource.data)">

Well, now, we show the nodes is node.ok or if !search

<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle 
      [style.display]="!search || node.ok?'block':'none'">

And

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" 
          [style.display]="!search || node.ok?'block':'none'">

See in this stackblitz

edited Apr 14, 2020 at 16:56

answered Apr 14, 2020 at 11:01

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

1 Comment

Andrei Maieras Over a year ago

How can you do it so if searching for 'Fruit' in your example you show all children of 'Fruit Loops'?

Collectives™ on Stack Overflow

Tree like checkbox and search filter implementation in angular?

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