Option to prevent removing the selected item

[Boris Jovicic]

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]

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]

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 

[Ponmani Murugaiyan]

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 

[Boris Jovicic]

Hi Ponmani,

Well done. That's exactly what I was looking for. 

Thanks for your answer. 

Best regards,

Boris 

[Ponmani Murugaiyan]

Hi Boris, 

Most Welcome. We always happy to assist you. 

Regards, 

Ponmani M