I'm using an igGrid where I have a delete button:
When I click this button, this item is deleted in the DB. Is there a way to also delete this item in this table using AJAX (in the success) without having to refresh the page?
Hello Ronny,
Thank you for posting in our forum.
In case you have not set the “autoCommit” option to “true”, the igGrid would not commit the pending transactions to the UI automatically - if you delete a row from the data source (on the client side), the grid would strikethrough the text and change its color in order to notify you the row has been deleted. Here is a sample screenshot:
If you want to commit the pending transaction (in your case - deletion of a row) and update the UI, try calling the “commit” API method in the AJAX “success” callback.
As I notice you use some custom templating for the last column, I would appreciate if you elaborate some more on the way you delete the row and when does it happen – is it after the call to the DB? If that is the case, then you would want to first call the “delete” API method, and then “commit” the transaction.
Another possible approach would be to set “autoCommit” to true in the grid options – that way you would not have to call the “commit” method manually - it depends on your scenario and the requirements that you have.
Please let me know if you need any further assistance or if you have some additional questions.
Hi
When I click the delete button, a popup opens to verify if you want to delete this item. If you click the delete button in the popup, this is triggered:
$('#btn-delete').on('click', function(e) { $('#confirm-delete').hide(); $.ajax({ url: '@Url.Action("DeleteReactivity", "SupplierEvaluation")', type: 'POST', data: { id: id }, success: function() { reactivities = reactivities.filter(item => item.Id !== id); => deletes the deleted item in the array that the grid is using } }); });
I set autoCommit on true, but this does not change anything:
Hello
Thank you for your reply. I tried this but I now get the following error:
This error message usually shows up when you try to call an Updating API method, but have not enabled the Updating feature itself by adding it to the “features” array. Here is a sample grid configuration:
$("#gridUpdating").igGrid({ primaryKey: "ProductID", columns: [ // …some columns… ], dataSource: ds, features: [ // …some other features… { name: "Updating", enableAddRow: true, enableDeleteRow: false }] });
I see the “Add new row” UI on the first screenshot you have provided – it shows up only when the Updating has been enabled. Have you disabled it afterwards for some reason, or is it still enabled?
Thank you. This helped!
Is there a way to automatically cancel when I cancel the delete by clicking on the cancel button in the pop-up so the user does not have to click cancel again:
Nerver mind I found it! I set editMode to "none"
I am glad that you find my answer helpful.
Feel free to contact me if you have any additional questions regarding this matter.