How to change record after downloading from server?

[AlexVDem]

Help please.
How to change records in grid after downloading from server?
For example: I have main table 'employees' with column 'department'. This column not a string value, but just a index to another table 'departments' table with two columns: 'id' and 'departments names'. Two tables indexed by 'employees.department' -> 'departments.id', so I just want to get departments names in Department column in main table instead indexes.
I have two tables records arrays. I can get array for main table (by url: from backend) , and array for second one (by ajax post method), and now I just need to understand, how to get first one array to substitute index in first array with names form second one.

This code doesn't work (for any recid, for example #3):

onRefresh: function(event){
           const ind = w2ui['gridrecords'].get(3, true);
           const record = w2ui['gridrecords'].records[ind];
            record.depardment = 'TEST'; // in future 'TEST' - name from second indexed table 
            w2ui['gridrecords'].refreshRow(3, ind);
}

because (in my opinion) that 'onRefresh' event works BEFORE records array made and completed. And the question is: how to makes it work? In another words, can I make a records changes after they are downloaded from server, but before they will be visible in table?
Thanks.
PS: of course, I always can do in on backend, or via SQL VIEW, but I have to do it on frontend.

[AlexVDem]

btw:

onLoad: function(event){
            function reload(){
              const ind = w2ui['gridrecords'].get(3, true);
              const record = w2ui['gridrecords'].records[ind];
              record.depardment = 'TEST';
              w2ui['gridrecords'].refreshRow(3, ind);    
            } setTimeout(reload, 1000);
        },

works, but this is 'lame horse'. Isn't it? I don't like 'setTimeout'.

[vitmalina]

You can modify you function not to be a "lame horse" in the following way

onLoad(event) {
    event.done(() => {
        this.records.forEach(rec => {
            rec.department = deparartments[rec.departmentIndex]
        })
    })
}

This will create a field called department which you can render in the column. This presuposes that you already have js array with departments in js. You can load it before grid loads. See https://w2ui.com/web/docs/2.0/utils/events

Also, you can define your own formatter function and then it will auto populate, see https://w2ui.com/web/docs/2.0/w2utils.formatters

[AlexVDem]

thank you... It's great