Option to prevent removing the selected item

Question

Hi,I would like to know is there an option to prevent the removal for selected chip by clicking remove icon, until user confirm that he want to remove the selected item? Here's how far I've come:

Ponmani Murugaiyan · Accepted Answer

Hi Boris, 

Thanks for the update. 

We have modified the sample as per your requirement using Syncfusion Dialog through utility methods.  

https://ej2.syncfusion.com/angular/documentation/dialog/render-a-dialog-using-utility-functions/#render-a-confirmation-dialog-with-options 





public onRemove(args) { 
    args.cancel = true; 
    this.currentValue = args.itemData.Id; 
    this.DialogObj = DialogUtility.confirm({ 
      title: " Confirmation Dialog", 
      content: "Would you like remove this item!", 
      okButton: { text: "Yes", click: this.okClick.bind(this) }, 
      cancelButton: { text: "No", click: this.cancelClick.bind(this) }, 
      showCloseIcon: true, 
      closeOnEscape: true, 
      animationSettings: { effect: "Zoom" } 
    }); 
} 
private okClick(): void { 
    var value = this.multiselectobj.value; 
    var index = value.indexOf(this.currentValue as never); 
    if (index > -1) { 
        value.splice(index, 1); 
        this.multiselectobj.value = JSON.parse(JSON.stringify(value)); 
    } 
    this.DialogObj.hide(); 
} 
 
private cancelClick(): void { 
    this.DialogObj.hide(); 
} 


Sample: https://stackblitz.com/edit/angular-wfasce-267tqd?file=app.component.ts 

Please get back us if you need further assistance. 

Regards, 
Ponmani M

Ponmani Murugaiyan · Answer

Hi Boris, 

Greetings from Syncfusion support. 

You can achieve your requested requirement using the removing event of Multiselect component. In which you can get the argument cancel which prevents the removal of item from the input. Here we have demonstrated with an example of alert button contains Ok and cancel. While clicking the remove icon, the alert button will be shown with message “Would you like remove this item” and if you click OK button will remove the item, by clicking cancel button prevents from removing.  

Please find the code snippet and sample below for reference. 

Event: https://ej2.syncfusion.com/angular/documentation/api/multi-select/#removing 





  





public onRemove(args) { 
    if (confirm("Would you like to remove this item")) { 
        args.cancel = false; 
    } else { 
        args.cancel = true; 
    } 
} 

Sample: https://stackblitz.com/edit/angular-wfasce-j7ayx6?file=app.component.ts 

Please get back us if you need further assistance. 

Regards, 
Ponmani M

Boris Jovicic · Answer

Hi Ponmani,Thanks for your answer. I tried that and it works. Unfortunately we are not able to use the confirm or alert dialog. Are you able to achieve that with syncfusion Dialog. DialogUtility.confirm({
That would be great. Thanks for your effort in advance. Boris

Boris Jovicic · Answer

Hi Ponmani,Well done. That's exactly what I was looking for. Thanks for your answer. Best regards,Boris

Ponmani Murugaiyan · Answer

Hi Boris, 

Most Welcome. We always happy to assist you. 

Regards, 
Ponmani M