How to get data for the selected rows based on column data

[abdul]

Hi,

My requirement is on click of any delete button it should delete all the rows based on Allocation Date.

Suppose if the user clicks on 1st row delete button then for the Allocation Date 10/31/2024, it has two records so it should delete the first two rows.

The below method calls on click of delete button. The server side code deletes the first two rows based on the Allocation Date , but the 

below DeleteRecord method only remove one row and sync the grid. It won't remove the 2nd row till we have to refresh the browser.

function DeleteRecord(e) {
    var grid = '';
    var tr = $(e.target).closest("tr"); //get the row for deletion
    var data = this.dataItem(tr);
    var confirmDialog = $('<div />').kendoConfirm({
        content: "Are you sure want to delete this record? This will delete all records for the selected Allocation Date",
        title: "Please confirm"
    }).data('kendoConfirm').open();
    
    confirmDialog.result.then(function () {
        
        grid = $("#TLPCurveAllocationsGrid").data("kendoGrid");
        grid.dataSource.remove(data);  //prepare a "destroy" request
        grid.dataSource.sync();  //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
        $("#TLPCurveAllocationsGrid").data("kendoGrid").dataSource.read();
    }, function () {
        //do nothing
    });   
}

 

[Ivaylo]

Hello Abdul,

Thank you for the code snippet and the details provided.

The desired functionality can be implemented by handling the "Remove" event of the Telerik UI Core Grid. Within the event handler, identify all models that share the same date as the selected row, remove them using the "remove" method, and then invoke the "sync" method to persist the changes. Below is an example of the implementation:

//C#
.Events(events => events.Remove("onRemove"))

//JS
function onRemove(e) {
            var grid = $("#Grid").data("kendoGrid");

            var dataSource = grid.dataSource;

            var itemsToRemove = dataSource.data().filter(function (item) {
                return item.LastSupply.getTime() === e.model.LastSupply.getTime();
            });

            itemsToRemove.forEach(function (item) {
                dataSource.remove(item);
            });

            dataSource.sync();
        }

Furthermore, I prepared a sample REPL, where the code can be tested and observed. Please let me know if this implementation meets your requirements:

• https://netcorerepl.telerik.com/Qebmlabe53EnI6cu58 

I hope this information was helpful.

Kind Regards,
Ivaylo
Progress Telerik