Events inside ng-template are executed last, while nodeSelecting is executed first

[Andy Möschwitzer]

I have the problem that when I click a button inside ng-template, the events nodeSelecting, nodeSelected etc. are fired first.
But I would like to trigger on click the deleteNode event from the button first and cancel the following events ( nodeSelecting, nodeSelected  etc.) with event.stoppropagation.

<ng-template #nodeTemplate let-data>

<div>
<div>
<span>{{data.title}}</span>
</div>

<div>
<button (click)="deleteNode($event, data)">
<mat-icon>delete</mat-icon>
</button>
</div>

</div>
</ng-template>

[Prasanth Madhaiyan]

Hi Andy,

Greetings from Syncfusion support.

We have validated your reported query in the Angular TreeView component by preparing the sample. In the TreeView component, we have disabled the pointer events for the tree node's full row element.

Your reported problem can be resolved by manually setting the pointer events to the button component rendered inside the TreeView template, which is used to render tree nodes.

Refer to the below code snippets.

[app.component.html]

 

<div class="control-section" style="overflow:hidden;">

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

    <div class="control_wrapper">

      <ejs-treeview

        id="template"

        [fields]="field"

        [fullRowSelect]="false"

        (nodeSelecting)="onNodeSelecting($event)"

        (nodeSelected)="onNodeSelected($event)"

      >

        <!-- Template to render tree node -->

        <ng-template #nodeTemplate="" let-data="">

          <div>

            <div class="treeviewdiv">

              <div class="nodetext">

                <span class="treeName">{{ data.name }}</span>

              </div>

              <div class="nodebadge">

                <span

                  class="treeCount e-badge e-badge-primary"

                  *ngIf="data.count"

                  >{{ data.count }}</span

                >

              </div>

              <button class="btn" (click)="deleteNode()">delete</button>

            </div>

          </div>

        </ng-template>

      </ejs-treeview>

    </div>

  </div>

</div>

 

[app.component.css]

 

.btn{

    pointer-events: auto;  

}

 

For your reference, we have attached the sample.

Sample: https://stackblitz.com/edit/angular-oqlmkb-dkjpmk?file=src%2Fapp.component.html

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Andy Möschwitzer]

Thank you very much for the quick answer,

unfortunately your solution does not apply to my use case.

I will try to describe my use case in more detail.

In your demo, when I click on the delete button of an unselected node, nodeSelecting is executed first and deleteNode() is executed at the end.

I use onNodeSelecting to be redirected to the node's detail view when I click on the node.

However, when I click on the delete button of an unselected node, onNodeSelecting is executed first (which redirects me to the detail view), but I only want to delete the node.

So my use case for deleting an unselected node is as follows.

1. user clicks delete button of a node which is not selected.

2. deleteNode() is executed.

3. event.stoppropagation() is used to prevent nodeSelecting from being executed. (so that the user is not redirected to the detail view).

Use case for node detail view:

1. user clicks on node

2. nodeSelecting is executed and redirects user to detail view.

Is there any solution for this problem?

Thanks a lot in advance for your support!

[Prasanth Madhaiyan]

Hi Andy,

As per the shared details, we understand that you want to trigger the button click event when you click the button and trigger the NodeSelecting event when you click the node itself. To achieve your requirement, we suggest using the mousedown and touchstart events for the button instead of the click event. This will allow you to differentiate between the two actions and handle them accordingly at your end.

Refer to the below code snippets.

[app.component.html]

 

<ejs-treeview

id="template"

[fields]="field"

[fullRowSelect]="false"

(nodeSelecting)="onNodeSelecting($event)"

(nodeSelected)="onNodeSelected($event)"

> 

<!-- Template to render tree node -->

<ng-template #nodeTemplate="" let-data="">

  <div>

    <div class="treeviewdiv">

      <div class="nodetext">

        <span class="treeName">{{ data.name }}</span>

      </div>

      <div class="nodebadge">

        <span

          class="treeCount e-badge e-badge-primary"

          *ngIf="data.count"

          >{{ data.count }}</span

        >

      </div>

      <button class="btn" (mousedown)="deleteNode($event)" (touchstart)="deleteNode($event)">delete</button>

    </div>

  </div>

</ng-template>

</ejs-treeview>

 

[app.component.ts]

 

export class AppComponent {

  ...

  public deleteNode(event) {

    console.log('Button click');

    event.stopPropagation();

  }

  public onNodeSelecting(args) {

    console.log('NodeSelecting');

  }

  public onNodeSelected() {

    console.log('NodeSelected');

  }

}

 

For your reference, we have attached the sample.

Sample: https://stackblitz.com/edit/angular-oqlmkb-rcbztf?file=src%2Fapp.component.html

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Andy Möschwitzer]

Many thanks for your help,

it works perfectly.

[Indhumathy Loganathan]

Andy, We are glad that your reported query has been resolved. Please get back to us if you need any further assistance.