I am trying to use the ActionStrip within a pretty basic grid and have an issue with refreshing the grid.
The annoying one is not being able to intercept and confirm a cancel before the deletion is done. I am handling that by storing a copy of the grid data, and then once the default actioinstrip delete is done, asking for a confirmation and if the user selects cancel, copying the copied data back into the variable used by the grid.
let confirm = window.confirm("This will delete this Emial Signature, confirm?");if(confirm) { . . .} else {this.data = this.tempData;}But the grid is not showing the record, even though the this.data variable is showing the proper data when examined while running.Is there a way to force the grid to refresh? this.grid.refreshgridState() without arguments and this.grid.reflow() do nothing for me.
Hello Ted,
Thank you for posting into our community!
I have been looking into your question and an approach I could suggest is using a custom implementation for the row delete action instead of the default one.
This could be achieved by wrapping a custom button inside the IgxActionStripComponent with the logic for opening the IgxDialogComponent and retrieving the row that should be deleted. Then, if the user confirms that the row should be deleted, you could use the IgxGridComponent’s deleteRow method to delete the corresponding record.
Here could be found a small sample demonstrating my suggestion.
Additionally, I believe that you will find our Row Actions topic here quite helpful as it provides detailed information as well as a sample with code snippets demonstrating how custom actions could be implemented inside the IgxActionStripComponent.
Please test this approach on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely,Riva IvanovaAssociate Software Developer
Thank you for that reply. I did try something like that, but when you add the igx-grid-editing-ctions to take advantage of the editing and adding capabilities of the Action Strip, you get a second trashcan icon. Is there a way to disable the action strip built-in delete function to drop the icon.In your example, I just added
Thank you for following up!
I have been looking into your additional question and an what I could say is that there are two possible approaches for achieving your requirement.
The first one is using a similar approach as the one for the delete button, i.e., defining custom buttons for the add and edit functionalities. The following sample here demonstrates how a custom edit button could be implemented and the following section here explains how row adding could be achieved programmatically.
The second approach is hiding the default delete button via css and this could look similar to the following:
:host ::ng-deep { igx-grid-action-button[iconname='delete'] { display: none; } }
Additionally, I have modified the previously attached sample using the second approach and it could be fund here. Also, I have included an *ngIf check, i.e., inEditMode, for the custom delete button in order to hide it when the row is in edit mode or a new row is added.
Please test these approaches on your side and let me know if you need any further assistance regarding this matter.