Is there a way to use event.stopPropagation() for multiselect.

[Boris Jovicic]

Hi, 
I am interested is there a possibility to prevent the default select event in multiselect component. I need the way to have possibility to click on button inside the itemTemplate without selecting the option item from multiselect. Here is the picture what I am trying: 

And here is the code what I tried already. 

<ejs-multiselect id="multiselectelement"

  class="category-multiselect" #category [dataSource]="categories" [fields]="fields"

  [value]="todo.itemCategories" [openOnClick]="true"

  [ignoreAccent]="true" [allowFiltering]="true" [mode]="'Box'"

  (filtering)="onFiltering($event)" (tagging)="onTagging($event);$event.stopPropagation()"

  (removing)="onRemove($event)" [hideSelectedItem]="false">

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

    <div fxFlex="80" class="truncate">

      <svg width="16" height="16" viewBox="0 0 24 24">

        <path [attr.fill]="'#' + data.colourHexCode"

          d="M1.382,11.384,13.16,22.953l.017.016a2,2,0,0,0,2.808-.021l7.065-7.063a2,2,0,0,0-.012-2.841L11.3,1.5c-.018-.019-.035-.037-.054-.054A3.751,3.751,0,0,0,8.855.465H2.363a2,2,0,0,0-2,2L.37,8.96A3.784,3.784,0,0,0,1.382,11.384ZM4.863,6.465a1.5,1.5,0,1,1,1.5,1.5A1.5,1.5,0,0,1,4.863,6.465Z" />

      </svg>

      <span class="custom-item">

        {{data.title}}

      </span>

    </div>

    <div fxFlex="20" fxLayout="row" fxLayoutAlign="end center">

        <img width="14" height="14" *ngIf="!data.isSystemCategory" class="edit-button" src="assets/icons/blue-pencil.svg">

      <a (click)="openConfirmModal(data)" rel='nofollow' href="javascript:">

        <img class="delete-button" src="assets/icons/todo-edit/trash-can.svg" alt="trash-can">

      </a>

    </div>

  </ng-template>

</ejs-multiselect>

[Berly Christopher]

Hi Boris, 

Greetings from Syncfusion support. 

We can achieve the requested requirement by prevent the select action in the template with help of args.cancel = true. Kindly refer the below code example. Here, we have defined the button class as “templatebutton” and restrict the select action. Due to this, while selecting li element only, the selected value will be updated in the input. You can make use of it based on the application needs. 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/multi-select/selectEventArgs/#cancel  

 

public onSelect(args) { 

  if (args.e.target.classList.contains("templatebutton")) { 

    args.cancel = true; 

  } 

} 

<ng-template #itemTemplate let-data> 

<div><button class="templatebutton e-btn">Click</button> 

  <div class="multiename"> {{data.Name}} </div> 

  <div class="multijob"> {{data.Job}} </div> 

</div> 

</ng-template> 

 

Sample Link: https://stackblitz.com/edit/angular-kqedwe-y8wbhf?file=app.component.html   

 

Regards, 

Berly B.C 

[Boris Jovicic]

Hi Berly,

Thanks for your answer. Yes I am familiar with args.cancel. That will prevent the selection. But it won't actually execute the click event that I need. Is that even possible? 

https://stackblitz.com/edit/angular-kqedwe-9eaxrp?file=app.component.html

Thanks

Boris

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hello Boris, 

 

Thanks for your update. 

 

We checked the reported issue of click event not triggered for the button. The cause of the issue is due to the popup is closed before the actual click event triggers. Therefore, we suggest you to prevent the closing of popup at the time of clicking the button. We made sample for your convenience. Please find the sample in the below link. 

 

Sample Link       : https://stackblitz.com/edit/angular-kqedwe-zmosck?file=app.component.ts 

 

Regards, 

Jeyanth.