Unselect node

[Karol Januszczak]

Dear Syncfusion Team,

I am struggling to get some default way of unselecting node in tree view.

I was able to do some workaround (to include all my logic for 'selection' and 'unselection' inside onNodeClicked) - but it would be great to have some hook for built it onNodeUnselected (that would automatically unselect node - and not be triggered on node expand/collapse).

Please advice if there is any built in feature for that, or will be inclueded.

Best regards,

KJ

[LeoLavanya Dhanaraj]

Hi Karol,

Greetings from Syncfusion Support.

Query 1 : I am struggling to get some default way of unselecting node in tree view:

With the provided details, we understand that you want to get any way to unselect the selected tree node in the TreeView component. You can meet your need with the TreeView selectedNodes property which that you can programmatically unselect nodes, including those selected during the initial rendering, by clicking the button(selectedNodes property to an empty array ([]), which clears the selection in the TreeView).

Query 2: unselect action in the TreeView:

Our TreeView nodeSelecting event is triggered both for selection and unselection actions. This behavior can be identified using the action property of the event arguments (NodeSelectEventArgs), which specifies whether the action is "select" or "un-select."

Note : For observing the event for unselection, the allowMultiSelection property should be enable.

Query 3 : Not be triggered on node expand/collapse:

We would like to inform that the TreeView expand/collapse operation happens when you double-click on the node only. So, the expand and collapse events not related to the node selection. Here, you can customize the action for the tree expand/collapse using the expandOn property.

Check the below mentioned code snippets and sample for your reference.

[app.component.html]

<button (click)="unselectNode($event)">unselect</button>

<div class="col-lg-12">

<div class="control_wrapper">

    <ejs-treeview

    id="default"

    #tree8

    [fields]="field"

    allowMultiSelection="true"

    (nodeSelecting)="onNodeSelecting($event)"

    ></ejs-treeview>

</div>

</div>

 

[app.compoennt.ts]

onNodeSelecting(args) {

if (args.action === 'select') {

    console.log('Node is being selected:', args);

} else if (args.action === 'un-select') {

    console.log('Node is being unselected:', args);

}

}

unselectNode() {

this.treeObj.selectedNodes = [];

}

Sample ; https://stackblitz.com/edit/angular-y6wy9bim-xjaeodzm?file=src%2Fapp.component.html,src%2Fapp.component.ts

Refer the shared details and get back to us if you need any further assistance.

Regards, 

Leo Lavanya Dhanaraj