Modern 6.2: Renderer Listener on Grid with dynamic data not called correctly

[pr0cat]

Hi,

I've got a store which i bind to a grid. For the grid-columns i have a renderer listener each. So my thought is : When loading data, every column gets called by the renderer.
Example of a column:

{
    text: "Test", dataIndex: "indexone", width: 60,
    renderer: function(value){
        if(value == "Bart Simpson"){
            value = "Mr. Simpson";
        }
        return value;
    }
}

For testing purposes i'm loading the Store by :

myGrid.getStore().loadData([["Bart Simpson", "12"],["Lisa Simpson", "9"], ["Marge Simpson", "40"]]);

The renderer gets called 3 times, as expected. All good untill i try it again, remove grid store first: myGrid.getStore().removeAll();
Then i call it with only one record

myGrid.getStore().loadData([["Bart Simpson", "12"]]);

Renderer gets called once, all good. Clear store again. Then i call it again with the early 3 records:

myGrid.getStore().loadData([["Bart Simpson", "12"],["Lisa Simpson", "9"], ["Marge Simpson", "40"]]);

Result: Renderer gets called..... once.....
Why is that?
I can even loadData with completely different records and even 1000 inside, renderer only gets called once, for the first record thats inside.

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2mv3 (open dev console)

Greets

[praveensaini23]

Hi,

I have seen this behavior when there is any error in rendering grid row. Can you confirm in developer tool console that there is no error in console in that case ??

If no clue, can you please provide fiddle for your code to look at ?

[pr0cat]

No errors. Grid renders all rows, but i need to get all renderers called.
Here is a fiddle example (open Dev tools to see the logs and reload... you see 3 Logs, then on clear and tap on 1, you see 1 log, then clear and on multi: 1 log aswell.... Even if you do multi, clear it and again multi: no renderer called). If you change all the records from the MultiButton to Bart, you can even see: Everything gets to "Mr.", but not all renderer logs are called. And thats what i NEED. i need all rows to iterate through the renderer.

https://fiddle.sencha.com/#view/editor&fiddle/2mv3

[praveensaini23]

Hi,

I tried to debug the code you gave. What engine is rendering the rows is keeping there reference in memory for future use. Now if you are passing the same record again at the same index, it will try to compare the last cached value with new value came in record, if those are same, it will not render new html, it will use the old one. When you are clicking again on single or multi record button, its coming first time because last time at that index first name was different.
So if you edit the code for single button and rather than firstName as Marge, put there firstName as Bart which is same as multi record, scenario, There will not be any log as engine will not render new row as record is same as cached one.

You can debug that easily to understand its working.

debug.PNG

You can check screenshot how its rendering the rows, hope it help.

[pr0cat]

Okay, i would've guessed it's caching when im immediately loading new records when already records exists, but not with everything. Even if you would loadData([["",""]]), it's then on the Multi records not rendering 3 times, which is kinda weird for my taste, since the 3 records are compared by one record containing empty strings, which means 3 new datasets are entered, therefor 3 renderer ....

It really helps to understand the way it works, but there has to be a way opening the same records in different orders and calling renderer every time. Is there a way to clear the cache?

[praveensaini23]

If you want to call the column renderer each time then you need to udpate its cached value that grid cell is keeping in "_value" config.

I tried to find a place to do so. You need to override the updateRecord function of Ext.grid.Row class.

You can check the fiddle - https://fiddle.sencha.com/#view/editor&fiddle/2mv6

I added below line in that override function -

// added below line to flush last cached value of cell
cell['_value'] = null;

After that engine is calling each time renderer that you want.

Hope that helps.

[evant]

i need all rows to iterate through the renderer.

Why? To what end? Given the example you specified it's rendering exactly what it's supposed to.

[pr0cat]

Given the example you specified it's rendering exactly what it's supposed to.

Not quite. I still need every dataindex renderer called (even those that are not new) to resize a few columns and get the longest row, since autoSize is not working in modern 6.2.
Thanks for your help praveensaini23 , its working! Greets.

[evant]

Right, that was my point. You decided you needed to use the renderer to achieve this, that was never mentioned anywhere in the original post.