Remove multiple checked items on a grid

[merrylin]

Hello. Good day, we have a grid that have items loaded with a urladaptor of paginated items. The grid has a checkbox selection of multiple items with the following settings:

    selectionSettings: { persistSelection: false, checkboxOnly: true, mode: 'Row'},

    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch', showDeleteConfirmDialog: false },

We have an add button to add rows programmatically on the grid view that calls addRecord(). On our delete button, we have 

var selectedRecords = grid.getSelectedRecords();

for(var i = 0; i < selectedRecords.length; i++){

        grid.deleteRecord('id', selectedRecords[i]);

}

However the problem is that it does not remove the newly added rows on the grid. Would it be possible to remove those rows on the view of the grid? Thanks for the help!

[Venkatesh Ayothi Raman]

Hi Merrylin, 

Thanks for contacting Syncfusion support. 

For your information, when we add a record with batch mode of Editing in Grid, we will make the records to be only display in Grid, and they are not updated in Grid until we press update toolbar button or invoke the batchSave API. So, they will be update after clicking on the update icon(by calling batchSave).  

 

We suspect that you would like to remove the newly added records in Grid before calling the batchSave to update the records to the Grid. If so, we suggest you to remove the currently added particular selected row element by using the JavaScript “remove” method and if the row already exist in Grid, then we have removed it with the “deleteRecord” method of Grid. Please refer the code example below, 

<button id="Delete">Delete Button</button> 

<script type="text/javascript"> 

        document.getElementById("Delete").onclick = function (args) { 

            var deleteobj = document.getElementById("JavaGrid").ej2_instances[0]; 

            var availableselectrows = deleteobj.getSelectedRows();                  

            var availableselectrecords = deleteobj.getSelectedRecords(); 

            for (var i = 0; i < availableselectrows.length; i++) { 

               if (availableselectrows[i].classList.contains("e-insertedrow")) {  //Here we will be checking for the inserted record 

                   //Remove the newly added rows in Grid. 

                    availableselectrows[i].remove(); 

                } 

                else { 

                    //Remove the already existing row in Grid. 

                    deleteobj.deleteRecord("OrderID",availableselectrecords[i]); 

                } 

            } 

        } 

</script> 

 

Please get back to us if you need further assistance. 

Regards, 

Venkatesh Ayothiraman. 

[merrylin]

Thank you, however when we have for example 3 records (let's say row a,b,c from top to bottom) on load of the grid, add 3 rows by clicking the add button, checking the last row (row c), row a, and the row above row a (which is a row added via the add button), it does not properly remove row c. Row c remains visually but cant be selected.

[Venkatesh Ayothi Raman]

Hi Merrylin, 

We are sorry for the inconvenience caused. 

We have validated the reported issue from our side and we could reproduce the reported issue. We have confirmed this as a defect “Provide support for range selection delete with Batch mode” and logged a defect report for the same. The fix for this issue will be available in our Volume 3, SP1 2018 release. 

Until then we appreciate your patience. 

Regards, 

Venkatesh Ayothiraman.