DataGrid inside the template of another DataGrid

Hello, I have a DataGrid where I set as Template another DataGrid.

I want this, so that each row of the DataGrid, has an arrow that if clicked, it will expand the row and show the inner DataGrid, which will have some other data to display.

Now my question is,

how on earth can I trigger the LoadData event of the inner DataGrid??
I have there a console.log() that never fires,
and I cannot just do: this.grid0.load(); in the main page Load event, because the generated Angular code, doesn't generate a @ViewChild line for that component, so it cannot be accessed like that.

What am I missing?

The end goal is, inside the LoadData event of the inner DataGrid, make an API call, to which I will pass the ${data.id} value, which should be the "id" property, of the selected Row that has been expanded.

You can use RowExpand event of the master grid instead to populate the child grid data similar to our hierarchy template:

thank you for the answer @enchev

I didn't see this RowExpand event!

This partially solves my issue, but I still got a problem.

Initially in the RowExpand, I would make my API call with the parameter ${event.id}
and then save the result to a variable, let's call it: "ResultVar"

Then, in my Template Grid, I would use as data this variable "ResultVar".
It works, but of course, if I have an already expanded Row, and expand a new one, the data from that variable will be overwritte and now both expanded Rows will show the same data!

I see in your screenshot that you don't save the Result of the Invoke onto a property, but you assign it to the ${data} object.

Now, I could do this, but in that case, how can I populate my Template DataGrid with the result?
I cannot just use ${data.MyResult} because ${data} is an array and it's impossible to assign the correct value to the right expanded row.

Could you help me with this?

Yes, the result is saved as a master grid data item property - ${data} is the data item not array. You can create a page using the template I suggested to check it.

Ok thank you,
so basically saving the result to ${event}, and then calling ${data} from the Template Grid, will contain only the expanded row data, that is clear now.

One last thing that is not still clear, how can I fire the LoadData event of the Template Grid? I would like to put some console.logs to see the actual ${data} objet and do some tests, but I cannot manage to make any event of the Template grid fire