How to prevent onselectionchanged method in aggrid to stop executing multiple times?

Question

I am using aggrid, where i have onselectionchanged method. So if I select 7k rows, it is executing 7000 times which causing page to hang.

If Anybody knows the reason it is that executing multiple times please share. How can I prevent this.

function onSelectionChanged() {

    getSelectedRowToStore();
}

function getSelectedRowToStore() {
    var myRowStorage = document.getElementById('recordJsonStore');
    // Convert the JSON String into an Object so we can manipulate it

    if (myRowStorage != null && myRowStorage != '') {
        dataSampleAfterUpdate = JSON.parse(myRowStorage.getAttribute('data-rows'));

    }
    if (dataSampleAfterUpdate == null) {
        dataSampleAfterUpdate = [];
    }


    var selectedRows = gridOptions.api.getSelectedRows(); //Here I am getting 7k on first time.But it again excecutes
    var obj = Object.fromEntries(dataSampleAfterUpdate.map(e => [e.Id, e]));

    selectedRows.forEach(function(selectedRow, index) {
        obj[selectedRow.Id] = selectedRow;
    });

    dataSampleAfterUpdate = Object.values(obj);

    var myRowStorage = document.getElementById('recordJsonStore');
    myRowStorage.setAttribute('data-rows', JSON.stringify(dataSampleAfterUpdate));
    if (dataSampleAfterUpdate.length > 0) {
        document.getElementById("unsavedLabel").style.display = 'inline-block';
        document.getElementById("unsaved").innerHTML = dataSampleAfterUpdate.length;
    }
}

var gridOptions = {
    columnDefs: columnDefs,
    rowData: arr1,
    checkbox: true,
    rowSelection: 'multiple',
    suppressRowClickSelection: true,
    rowMultiSelectWithClick: true,
    onSelectionChanged: onSelectionChanged,
    suppressCopyRowsToClipboard: true,
    animateRows: true,
    defaultColDef: {
        resizable: true,
        sortable: true
    },
    enterMovesDown: true,
    enterMovesDownAfterEdit: true,
    //rowBuffer: 500,
    enableRangeSelection: true
}

Answer 1

the thing you are experiencing is normal. Since you are using a custom function, you must be looping over the rows and setting them to selected. something like this :

this.gridApi.forEachNode(node => {
   node.setSelected(true); // or false for that matter
});

for each node set to selected, the event onSelectionChanged will trigger.

Sadly, I don't think there is any other way to do this, as the infinite mode on agGrid seems to have this limitation and doesn't seem to have any hope for fixing. So you need to work around it, by trying to accumulate the onSelectionChanged event calls in some way.

Answer 2

There still (April 2022) doesn't seem to be a good solution to this in the AG Grid API.

One work-around/hack may be to capture a timestamp in the code that selects rows and make the selection event handler depend on this. Like so:

// individual row selections above
const updated = Date.now();

this.gridOptions.onSelectionChanged = event => {      
    if (Date.now() - updated < 200) {
        return; 
    }
    // complex event handler below
        ...