Hi Everyone,
I just know that in ODC when we render a long list data (using List), it won't renders all data at once. When user scroll to bottom then it will render the other records and hide some records above, EG: I put 200 records for my list. UI just render records from 1 - 99. When scroll down, it will render another let say 10 records and hide some records above so the records rendered in UI become 5 -110.
Please note that I am not using any event like list event "scroll to bottom". I display all records without pagination. I think this rendering is from Outsystems framework to speed up the rendering in UI and this is a good feature actually.
The problem that I got by this feature is I have a script to be run for all records. Because the first render is only about 99 records, my script can only proceed 99 records whereas the other hidden records is not getting executed by my script. When user scrolls down to bottom and some records now get rendered, these new rendered records was not executed by my script. I need to re-execute my script again when new records appear.
My question is: is there any event get triggered when the re-rendering on the list happen? I need to know the event so that I can re-execute my script on this event.Cheers,Dedy
It is not a standard html event, it is a reactjs event. You can just type it in, you are not limited to select an event from the list.
See for more information this article of my colleague @Ozan Can Çalı:
https://blog.product-league.com/bite-size-javascript-functions-for-outsystems-development-part-1-6f15715e0f80
Hi Dedy,
I'm with @Daniël Kuhlmann , make sure you really need to do something on the list at the DOM level, otherwise, just code in OutSystems against the underlying variables.
In case you have to, you could also disable the virtualization on that list, at the expence of front end performance.
This is done like this
Dorine
Why are you processing the list, and not the aggregate that populated the list?
Hi Daniel,
Because I need the list to be rendered first in UI, and after rendering done, my script will do something based on the rendering result.
Nevermind, if there is no event get triggered on re-rendering, I still can use another observation as the workaround.
Cheers.
Hi,
You can also use the ReactJS event componentDidMount on the specific OutSystems widget and add an event handler.
https://www.codingame.com/playgrounds/8747/react-lifecycle-methods-render-and-componentdidmount/
No Javascript needed.
Regards,
Daniel
I would like to try that event componentDidMount but I don't see it at all in ODC. This is all event on a container I can see:
Any clue please?
Thanks,Dedy
Hi Daniel, I never know that the select event can allow us to type another event. That's good to know actually and I have tried it and yes it will trigger the event without us adding any observation script.
Thank you for the solution, this perfectly works for me if I want to do observation.
Cheers,Dedy
Hi Dorine,
That disable-virtualization works like a charm! The list now renders all record. But yeah I need to consider front-end performance (perhaps I need to use componentDidMount from Daniel solution).
Thank you for the solution, this is what I need as of now.
Hi @Dedy Hartono ,
you still leave us guessing on why exactly you need to execute a script on the list items, what is it that you can't just do in the OutSystems code ?
just curious,