iggrid delete row after click delete button

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 Ronny,

 

Deleting a row in the original array would not be reflected by the igGrid, because by design it creates an internal copy of the data, which it uses for databinding afterwards.

 

Instead, try calling the deleteRow method that the igGridUpdating API exposes. It expects a rowId, also called a primary key, to be passed in, then deletes the given record from the igGrid’s data source (that is the internal copy of the original array) and updates the UI.

In your configuration autoCommit has been set to “true”, which means you do not have to explicitly call the “commit” igGrid method – when you delete a row, the transaction would be committed automatically and the UI would be updated accordingly.  

 

Feel free to contact me if you have any additional questions regarding this matter.

Hello

Thank you for your reply. I tried this but I now get the following error:

Hello Ronny,

 

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”

Hello Ronny,

 

I am glad that you find my answer helpful.

Feel free to contact me if you have any additional questions regarding this matter.