JSGrid - Change cell value after page is changed (onPageChanged method) not working

Question

I'm using JS-Grid and I want to update a specific cell value right after i change a page. Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.

I have the following JS-Grid code:

$("#itemsListGrid").jsGrid({
        width: "100%",
        filtering: true,
        sorting: !0,
        viewsortcols : [true,'vertical',true],
        paging: true,
        autoload: true,
        pageSize: 9,
        pageButtonCount: 5,
        controller: db,
        fields: jsGrid_fields_mapping,

        onPageChanged: function() {
            alert("START onPageChanged");
            var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
            archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
            alert("END onPageChanged");
        }
    });

Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.

Answer 1

Maybe not the most clean way to do it, but have you tried using setTimeout()?

So, in your case:

onPageChanged: function(args) {
        alert("START onPageChanged");
        // Wait some time to render table, then call function
        setTimeout(function() {                 
             var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
             archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
             alert("END onPageChanged");
        }, 300);
    },

Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.