Angular-tree-component: tri-state checkboxes

[Freest10]

Hello, are you planning "tri-state checkboxes"?
I am very need in this in my project)

[adamkleingit]

Sometime in the future yes, but don't know when.
It is completely possible to implement this yourself using angular2-tree-component BTW

[popojargo]

Simply add a checkbox in the template. Then, you need to add the selection logic.

Using the events, you can bind the onActivate and onDeactivate events to check and uncheck the checkboxes.

[debslab]

Please let us know if you are planning to add this out of the box. If not, can you please provide a sample template which includes html structure. Do I need to include the checkbox inside TreeNodeContent?

[adamkleingit]

Hi,

I don't have any schedule for this yet. I'm currently solving performance issues for large trees using virtual scroll and MobX.

MobX is a great way to do tri-state checkboxes, so I plan to use it for this feature as well.

You can override either the treeNodeTemplate or the treeNodeFullTemplate, please refer to the docs.

Thanks

[debslab]

Thank you. I am trying following template.

Now in the function go, I need to get access to all child nodes checkbox so that I can check them. Please let me know how I can achieve it.

[debslab]

Hi..any update on my previous comment...it's an awesome component to use in my project..only one thing which is bugging me is not having checkbox support...if you provide some pointer to how we shall do it, it will be highly appreciated...

[adamkleingit]

Hi,

you can you node.getVisibleChildren() to access all children that are
visible, or just node.children if you are not doing any filtering on the
tree.
Also - it's better to use (change) and not (click) on checkboxes, and
you must also use [checked] to bind to the checked property of the checkbox.

All the best

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Thu, Feb 16, 2017 at 5:30 PM, debslab [e-mail] wrote:

Hi..any update on my previous comment...it's an awesome component to use
in my project..only one thing which is bugging me is not having checknox
support...if you provide some pointer to how we shall do it, it will be
highly appreciated...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular2-tree-component/issues/83#issuecomment-280362938,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSvzzZRDImJJZZu4Nrl-tle1PmyZsks5rdGumgaJpZM4KZwFd
.

[debslab]

Thanks a lot. I have done the implementation as following.
// html



// code executed if we click on any checkbox
public updateChildNodesCheckBox(node,checked) {
if (node) {
var inputValue:HTMLInputElement = document.getElementById('check-' + node.id);
if(inputValue) {
inputValue.checked = checked;
}
for (let i = 0; i < node.children.length; i ++) {
this.updateChildNodesCheckBox(node[i], checked);
}
}

}

But when I access child nodes, if the node is collapsed, I cannot get hold of the child nodes as they are not there in dom. A workaround is to check or uncheck those child checkbox when the node is expanded. Please let me know if I am missing something here.

[debslab]

Actually in onToggleExpanded also, I am not getting hold of child node as it's yet to be rendered. So I am not able to do the workaround I mentioned earlier. Please help

[debslab]

If I get an event after expand, that will suffice as that time child nodes will be available to me

[adamkleingit]

Hey,

you shouldn't update DOM elements directly. Angular provides data-binding for that.
You should update a checked property on the nodes themselves and bind to it using [checked] property.
something like:

<input ... [checked]="node.data.checked">

updateChildNodesCheckBox(node) {
  node.checked = true;
  if (node.children) {
    node.children.forEach((child) => updateChildNodesCheckBox(child));
  }
}

[debslab]

Thank you very much. Finally I am able to implement this. For setting child nodes checkbox, I followed your approach. But for parent nodes I needed to access DOM elements directly. I needed to set the checkbox of parent to indeterminate state which, I guess, is not possible without accessing DOM element. Using checked property of angular, I can select or unselect a checkbox, but unable to set indeterminate state.

[debslab]

Logic I have written to set parent node checkbox-

public updateParentNodesCheckBox(node) {
    if (node && node.level > 0 && node.children) {
        let allChildChecked = true;
        let noChildChecked = true;
        for (let child of node.children) {
            if (!child.data.checked) {
                allChildChecked = false;
            } else if (child.data.checked) {
                noChildChecked = false;
            }
        }
        let inputValue: HTMLInputElement = <HTMLInputElement> document.getElementById('check-' + node.id);
        if (allChildChecked) {
            node.data.checked = true;
            inputValue.indeterminate = false;
        } else if (noChildChecked) {
            node.data.checked = false;
            inputValue.indeterminate = false;
        } else {
            node.data.checked = true;
            inputValue.indeterminate = true;
        }
        this.updateParentNodesCheckBox(node.parent);
    }

}

[adamkleingit]

Hey,
You should be able to use [indeterminate] as well in the template.
Angular allows to bind to all properties of DOMNodes.

[debslab]

thank you. I updated my code.

[touqeershafi]

do we have any official documentation on this feature ?

[debslab]

here you go - https://angular2-tree.readme.io/docs/tri-state-checkboxes

[kmuseligadoo]

Hello, i am using the same code but the indeterminate is not working on save
Any help?