How to get a different grid as child from a differ

Question

I have made a grid with buttons in each row which on-click opens a pop-up having different grids on each button.

Each row of the pop-up grid may have a child (another grid with only one column). And if there is no child it should be empty.

So, I'm trying to map each row with a child using parent-Id(PId) and (Id) as shown in the given example, which is taking all the available child's into a row or taking none of them into it.

Dojo Sample Code

Answer 1

Using detailInit requires a slightly different method of exposing the data belonging to the parent item. You can extract this data using e.data like so:

var newData2 = crdata.filter(function(ell) {
    return ell.NId == e.data.Id && ell.PId != 0;     
});

That along with checking that the dataSource NId = parent row Id and moving the setup of the dataSource for the child grid into the detailInit function itself should do the trick.

Dojo example to demonstrate the above.