When using virtual column mode, virtualColumns = true / scrolling = "virtual" in conjunction with grid state caching (both based on the How To examples), and the grid is embedded inside of a tabstrip (which itself implements load on demand directive based How To example for tabstrips), the grid doesn't seem to restore, i.e. show, the grid state until user clicks on another tab and then clicks back... Wondering if manually forcing grid UI refresh will restore the cached state.
How to pro grammatically force UI refresh of grid?
1 Answer, 1 is accepted
Hi Edward,
Thank you for the provided details.
Indeed, the described behavior is usually caused by Angular's change detection mechanism not being triggered. A common pitfall is when a component property isn't updated by reference and just its value is updated. In such cases Angular's change detection isn't triggered and the view won't be re-rendered. Please check the following StackBlitz example demonstrating the difference when changing the array passed to the Grid by value or by reference:
https://stackblitz.com/edit/angular-rjrkzb-fmyqqe?file=app/app.component.ts
I can also suggest to check some of the online available articles on Angular Change Detection which may provide some more relevant details:
https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/
In the reported scenario it seems that the Grid updates its data as Angular's change detection mechanism is triggered by the click event fired when changing the currently selected tab. Try changing the reference of the array passed to the Grid in order to trigger the Angular change detection which will cause the Grid to be re-rendered. (the use of the virtual columns and tabStrip shouldn't be affecting the default behavior of the change detection mechanism)
I hope the provided information helps. In case further assistance is required for this case, could you provide an example demonstrating the use-case scenario. Thank you in advance.
Regards,
Svetlin
Progress Telerik