How can I Remove additional rows during editor delete process?

How can I Remove additional rows during editor delete process?

BROB201BROB201 Posts: 28Questions: 4Answers: 0

I want to use the preRemove callback to remove one or more additional rows which are linked to the rows being removed using the datatable editor. If I remove the additional rows in the preRemove (or the ajax.success callback), the datatable or editor state is negatively impacted in some way, causing the datatable to remove a row that it isn't supposed to remove and leave one of the rows that it should have deleted.

var removeRowById = function (datatable, id) {
    console.log('deleting #' + id);
    datatable.row('#' + id).remove();
};

editor.on('preRemove', function (e, response) {
    $.each(response.data, function (index, crfkey) {
        console.log('deleted #' + crfkey);
        var rowData = datatable.row('#' + crfkey).data();
        if (rowData.labelkey === 2) {
            removeRowById(datatable, rowData.changed_fields.crfkey.original);
        }
    });
    datatable.draw();
});
}

consider a datatable with the following rows:
row1-old
row1-new
row2-old
row2-new
row3

  1. select row1-new and row2-new
  2. click delete
  3. confirm delete in the editor modal
  4. editor makes ajax call to server to delete the rows in the db
  5. editor calls preRemove
  6. I .remove() the row1-old and the row2-old rows then call datatable.draw()

result:
row1-new

Any thought on how to fix this? I was able to get it working with a single delete by using setTimeout() and delaying the remove by a second, but this doesn't work for multiple rows. This appears to be a re-indexing issue.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Could you try it in postRemove please? I think you are right, it is an indexing issue - one which will be addressed in future when DataTables moves to a sparse array for its internal data store of rows.

    Allan

  • BROB201BROB201 Posts: 28Questions: 4Answers: 0

    I did try using postRemove, but the issue there is that in order to find which additional rows to remove, I need to be able to reference the data of the row before it is removed from data(). I suppose I need to store the ids somewhere so that the postRemove can use them.

  • BROB201BROB201 Posts: 28Questions: 4Answers: 0

    That did the trick. I did something like this:

    var removeRowById = function (datatable, id) {
        if ($.isArray(id)) {
            id.forEach(function (rowId) {
                datatable.row('#' + rowId).remove();
            });
            datatable.draw();
        } else {
            datatable.row('#' + id).remove().draw();
        }
    };
    
    //preRemove happens after the ajax call but before the row and data() is removed
    var postRemoveIds = [];
    editor.on('preRemove', function (e, response) {
        $.each(response.data, function (index, key) {
            var rowData = datatable.row('#' + key).data();
            if (rowData.labelkey === 2) {
                postRemoveIds.push(
                    rowData.changed_fields.key.original
                );
            }
        });
    });
    
    editor.on('postRemove', function (e, response) {
        removeRowById(datatable, postRemoveIds);
        postRemoveIds = [];
    });
    
This discussion has been closed.