How avoid to component data update when it isn't showed?



In my test application I have some datagrids and charts in different tabs, and I see (and surprised) that also the datagrids and charts that are in not current active (and showed tab) execute the expression setted in their data proprerty. This caused useless request data traffic. How I can avoid this? I want that datagrids and charts request data only when are visible on the screen.



The DataGrids and Charts are most probably populated by data-binding them topage properties. Those are usually initialised via Invoke data source method actions in the Load event of the page (this is what the configuration wizards do by default). The Load event of the page doesn't know about tabs and executes unconditionally.

There is a way to do what you want though - you will have to handle the Change event of the tab and populate the page properties based on the current tab index (available as ${event.index}):


Hi Korchev, thanks for your suggestion.
Is there mode programmatically at .component.ts to know if a component is showed in page?
Or in other words, do at the .component.ts is available the access to the list of components in page and it is possible programmatically to access their properties?
The single component can be not showed because is in not active tab or because its visibility property is
at the moment equal false. So it is very important can test these conditions to avoid useless update cycle of the component. The better thing should be that this check is made to default directly by the engine of RADZEN, without necessity to implement additional code at the level of final application.


If the Visible property of a component is set to false the backing property in the *.component.ts file will not be initialised. Angular will not instantiate a component which isn't visible.

The Tabs component however doesn't rely on the Visible property. It just hides the inactive tabs with CSS. There isn't API that can tell if a component is inside an inactive tab.