We have a Service calling a Webapi method after a while the child grid data is no longer bound. Is there something I am missing in my grid.
Hello Eric,
Thank you for posting in our forum.
Could you share some additional details like:
You can refer to the following sample that has a similar setup, however I have not been able to replicate your issue in it:
https://stackblitz.com/edit/angular-tyjbmq
Let me know if you are able to replicate it on your side and if not then please feel free to modify the sample to more closely resemble your scenario.
I’m looking forward to your reply.
Regards,
Maya Kirova
The data disappears after the user sits idle for a few minutes. There is no expansion or collapse of the child grids.
We are using
Please note that the response from the service is currently setup to map to a data object:
public getData(dataState?: IDataState): Observable<any[]> {
return this.http.get(this.url).pipe(
map((response: any) => response.data)
);
}
Since your data is currently not wrapped in any object you should remove this.
Otherwise you are biding to an non-existing object, hence the grid would have no data.
Hello Maya,
That example worked great. I realized I have to use Stackblitz in chrome rather than Edge. Now I am trying to adjust the example to work with a locally running Web API Project and am getting a Grid has no data message.
Here is the shape of the JSON data which takes about 1 minute and 19 seconds to return from the HTTP Get Request
[ { "JobInfoID": 292, "JobNumber": "710417074 ", "JobName": "21-30 44th Drive", "ClientName": "Source Construction Inc", "StartDate": "2018-02-18T00:00:00", "Status": "Pending Assignment", "GrossBuildingArea": 0.0, "Total": 0.0, "Floors": [ { "JobInfoFloorID": 916, "Sequence": 1, "FloorName": "Ground/ 1st", "Area": 13708, "StartDate": "0001-01-01T00:00:00", "LinearFootHandrail": 0, "ClearStoryHeight": "10'-4\"", "Days": 15, "LinearFootBeam": 202, "NoOfDrops": 0, "Shore": null } ] }
]
And here is the forked, saved Stackblitz update.
https://angular-tyjbmq-edepr4.stackblitz.io
Unfortunately I was not able to reproduce this on my side.
I’ve modified the response from the service for the first item before binding it to the grid so that there is some different data in the child under the first row.
Here’s the sample for your reference:
https://stackblitz.com/edit/angular-tyjbmq-8ucgwh
After expanding the first row, the data is properly bound to each row in the child grid:
Please test it on your side and let me know if you’re able to replicate the issue with the provided sample.
If the sample is not an accurate representation of your scenario please feel free to modify it and send it back or share a sample of your own if you have one.
That now shows the data instead of an empty grid but the child grid for JobInfoFloors repeats the first floor for every item in the sub array:
Assuming this is the format of the data you return from your service for the parent grid:
"data": [{
"JobInfoID": 289,
…
"JobInfoFloors": [{
"JobInfoFloorID": 902,
Then all the data for the parent and child is already available. There is no need to implement Load on Demand for the child row island as the child data is already available in the JobInfoFloors in each parent record. You just need to bind to the data returned from the service.
Here’s a sample with the url you have shared as your publicly accessible Web API:
https://stackblitz.com/edit/angular-tyjbmq-vlg58y
Let me know if that solves your issue.