clr-tree-node selection not effect collapsed child nodes

Question

I've build a component based on Clarity (v 0.13.1) Tree view,

I have an issue when i am selecting\ unselecting a collapsed parent node, it's not affecting child nodes selection, and when i'm expanding him he is getting selected\unselected again.

Can someone assist please?

below is the view:

<clr-tree-node class="tree-root" [(clrSelected)]="tree.selected" id="statusTreeFilter">
{{tree.name}}
<ng-template [(clrIfExpanded)]="tree.expanded">
  <clr-tree-node *ngFor="let group of tree.childs" [(clrSelected)]="group.selected">
    <span>{{group.name}}</span>
    <ng-template [(clrIfExpanded)]="group.expanded">
      <clr-tree-node *ngFor="let status of group.childs" [(clrSelected)]="status.enable">
        <span>{{status.name}}</span>
        <ng-template></ng-template>
      </clr-tree-node>
    </ng-template>
  </clr-tree-node>
</ng-template>

and Data:

let tree = {
"name": "All",
"selected": true,
"expanded": false,
"childs": [
  {
    "name": "Generate",
    "selected": true,
    "expanded": false,
    "childs": [
      {
        "name": "Init",
        "enable": true
      },
      {
        "name": "Generating",
        "enable": true
      },
      {
        "name": "Generated",
        "enable": true
      }
    ]
  },
  {
    "name": "Printing",
    "selected": true,
    "expanded": false,
    "childs": [
      {
        "name": "Printing",
        "enable": true
      }
    ]
  },
  {
    "name": "Finalized",
    "selected": true,
    "expanded": false,
    "childs": [
      {
        "name": "Completed",
        "enable": true
      },
      {
        "name": "Cancelled",
        "enable": true
      }
    ]
  }
]

}

score 0 · Answer 1 · answered Jul 03 '18 at 16:18

0

Your root node needs to point to the boolean selected property of the selection object. You're setting the clrSelected binding to the whole object, which causes this behavior.

<clr-tree-node class="tree-root" [(clrSelected)]="selection.selected" id="statusTreeFilter">

Here it is setup fully. https://stackblitz.com/edit/clarity-hmrndh?file=app%2Fapp.component.html

answered Jul 03 '18 at 16:18

Jeremy Wilken

6,965
22
21

Hi, thanks for the answer, i have already tried your suggestion, and it isn't helping, you can see this behavior in you'r example too, when you selecting\ unselecting a collapsed parent node, he's selection changes when you expand it. – iepc Jul 04 '18 at 06:53
You must have misunderstood something about the question because your example behaves just as the OP described. That is, child nodes are not getting affected by the parent's selection correctly. – Ruan Mendes Jul 04 '18 at 14:21
Ok, so I see the collapsed state issue now that I read it again. It helps to provide a working example, and the fix I've described is still necessary to get it to work at all. However, this is an open issue see https://github.com/vmware/clarity/issues/1400 – Jeremy Wilken Jul 05 '18 at 14:42
Thanks @JeremyWilken, It seems like this bug is on hold, do you know when it will be fixed? – iepc Jul 09 '18 at 13:54
We're looking at understanding use cases better, so feel free to explain your use case in that ticket. – Jeremy Wilken Jul 10 '18 at 15:04

score 0 · Accepted Answer · answered Oct 02 '19 at 05:55

0

Fixed on clarity 1.0 (breaking changes)

See ticket here

answered Oct 02 '19 at 05:55

iepc

1
4

clr-tree-node selection not effect collapsed child nodes

2 Answers2