Hi all,
I have a question about the tree (https://es.infragistics.com/products/ignite-ui-angular/angular/components/tree), how could I trigger a function when there is a node selected in the tree? For example, the function takes the name of the node, and react accordingly. There are another 2 requirements in my case.
1. The tree should not have checkboxes, so its Selection = None, not BiState or Cascading
2. I don't want to use "activeNodeChanged" (www.infragistics.com/.../IgxTreeComponent.html, because it has side effect, which also triggers the function when I want to expand the tree by clicking the expand symbol next to the node. And it is not wanted.
Could anyone help? Many thanks
Gotop
Hello Gotop,
After investigating this further, I have determined that your requirement could be achieved by handling the click event of each node in the IgxTree, setting the selected state of the node and executing a custom method. This could be achieved as follows:
public ngAfterViewInit() {
this.tree.nodes.forEach((node) => {
node.nativeElement.addEventListener('click', (evt) =>
this.onClick(node, evt) );
});
}
public onClick(node, event) {
if ( event.target.ariaLabel !== 'Expand' && event.target.ariaLabel !== 'Collapse') {
node.selected = !node.selected;
this.customFunction();
Please keep in mind that by design the selectedChanged event is not emitted, when a node is selected through the API. It is emitted only by clicking on the checkbox or by pressing ‘Space’.
I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
Hello Monika,
thank you very much for the quick response. It is interesting to look at your solution, but it is not what exactly I want.
Maybe I have explained my need wrongly. So what I want is a tree so that users can select one and only one item of the tree at a time, and that triggers a function, that knows which item was just selected and will responde accordingly.
Because the users will select just one item, so the checkboxes are not needed. (Otherwise, it is rather confusing.) And because the items should be displayed hierarchically, so I want to choose a tree.
But I couldn't figure out how to get that with igx-tree. Could you help? Many thanks
In order to select only one node, what I could suggest is deselecting all nodes on click and selecting only the clicked one. Additionally, the selected node could be saved to variable as follows:
if (
event.target.ariaLabel !== 'Expand' &&
event.target.ariaLabel !== 'Collapse'
) {
event.preventDefault();
event.stopPropagation();
this.selectNode(node);
this.selectedNode = node;
public selectNode(clickedNode) {
node.selected = false;
clickedNode.selected = true;
Below I am attaching the modified sample. Please test it on your side and let me know if you need any further information regarding this matter.
Furthermore, please keep in mind that the IgxTree does not support single selection out of the box and this should be achieved on application level, which is beyond the scope of Infragistics support.
angular-4n1hmu.zip
thank you so much. it is exactly what I am looking for.
Regards,
I am glad that you find my suggestion helpful and were able to achieve your requirement.
Thank you for using Infragistics components.