Hidden Grid component and events

[mcanavar]

Hi ,
I experience that when I have a grid component on the page ,that is by default hidden, e.g. the loadData event is not available .
Situation:
Page with some field to filter data input and a button to invoke grid0.load , grid0 is hidden by default .
User clicks on button, the button contains execute for grid0.load(). this.grid0.Visible=true,this.grid0.load()

What happens: first click on button : displays the grid , seccond time clikking the button executes the grid0.loadData event ( once it is visible by the first click ) .

Debug in browser shows some errors when grid is hidden:
ERROR TypeError: Cannot read property 'load' of undefined

Goal is to have a button that can control one or more grid components on page to be visible based on user input and invoke multiple loaddata scenarios.

How to do this with Radzen.

[korchev]

Hi @mcanavar,

There are a couple of issues with your approach:

1. The DataGrid doesn't have a Visible property available at runtime. Radzen renders the Visible property via the *ngIf angular directive e.g. <rz-grid *ngIf="false">
2. The backing field grid0 isn't immediately available after showing a component - it needs another Angular change detection cycle to occur.

So how do we do that in Radzen?

1. Use a property to store the visibility state of the DataGrid.
   
   
   
   
   
2. Toggle that property when you click the button. Solves the problem with the DataGrid not having a Visible property at runtime.
   
   
3. Use setTimeout when calling the load method. This makes sure the grid0 backing field is available.