Skip to content

Infragistics Community Forum / Web / Ignite UI for jQuery / iggrid delete row after click delete button

iggrid delete row after click delete button

New Discussion
Ronny Gilisen
Ronny Gilisen asked on Jun 13, 2019 2:22 PM

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?

Sign In to post a reply

Replies

  • 0
    Vasil Pavlov
    Vasil Pavlov answered on Jun 7, 2019 7:48 AM

    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.

    • 0
      Ronny Gilisen
      Ronny Gilisen answered on Jun 7, 2019 9:19 AM

      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:

      • 0
        Vasil Pavlov
        Vasil Pavlov answered on Jun 10, 2019 11:04 AM

        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.

      • 0
        Ronny Gilisen
        Ronny Gilisen answered on Jun 12, 2019 7:25 AM

        Hello

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

      • 0
        Vasil Pavlov
        Vasil Pavlov answered on Jun 12, 2019 12:40 PM

        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?

      • 0
        Ronny Gilisen
        Ronny Gilisen answered on Jun 12, 2019 1:00 PM

        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:

      • 0
        Ronny Gilisen
        Ronny Gilisen answered on Jun 13, 2019 8:31 AM

        Nerver mind, I found it! I set editMode to “none”

      • 0
        Vasil Pavlov
        Vasil Pavlov answered on Jun 13, 2019 2:22 PM

        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.

  • You must be logged in to reply to this topic.
Discussion created by
Favorites
Replies
Created On
Last Post
Discussion created by
Ronny Gilisen
Favorites
0
Replies
8
Created On
Jun 13, 2019
Last Post
6 years, 8 months ago

Suggested Discussions

Created by

Created on

Jun 13, 2019 2:22 PM

Last activity on

Feb 23, 2026 2:34 PM