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
I assume that your backend service is not publicly accessible, so Stackblitz would not be able to access it to display the data. You can Fork the original sample (Fork button at the top in Stackblitz) and apply your changes there, but make sure the backend service you use can be accessed externally.
I wasn’t able to replicate this in the previously shared Stackblitz sample when leaving it idle for a while. Let me know if you’ve been able to replicate it there and if so if it happens in a particular browser or environment.
If not, other than the data being different I don’t see much of a difference in the settings and the way the data is passed to the grid between your code snippets and the sample.
Could you share an example of what the json data returned from your service looks like for the parent and the child grid requests? Could you also check that there’s just one request for each, one for the parent when the page loads and one when the child grid is first expanded.
Also are there any errors when the data disappears in your application?
Regard,
Hello Maya,
Looks like the Web API Method is accessible outside of our network:
http://toddev.titanformwork.com/SalesmanJobInfo/GetJobInfoFull
The JSON looks like the following:
{ "data": [{ "JobInfoID": 289, "SequenceNumber": 0, "JobNumber": "710418019 ", "JobName": "314 Pennsylvania Avenue", "BusinessUnitID": 0, "ClientName": null, "StatusName": "Pending Assignment", "BookedUnbookedArchivedStatus": "Booked", "StartDate": "\/Date(-62135575200000)\/", "StartDateASISO8601": "2018-02-25T00:00:00Z", "GrossBuildingArea": 22720, "Total": 22110.000, "PrimarySalesmanName": "Paul Tauscher", "BidDate": "\/Date(-62135575200000)\/", "BidDateASISO8601": "2018-02-02T00:00:00Z", "Phase": null, "FreightRate": null, "EngineeringHours": 0, "DetailerHours": 0, "PrimaryEngineerName": null, "Remark": null, "NoOfFloor": 9, "PercentageShipped": null, "PrimaryCADTeamLead": null, "SecondaryCADTeamLead": null, "PrimaryDetailer": null, "SecondaryDetailer": null, "PDFFile": null, "ClientBusinessUnitID": 2200, "BusinessName": "Triborough Construction Services, Inc.", "JobInfoFloors": [{ "JobInfoFloorID": 902, "JobInfoID": 0, "Name": "Roof", "FloorType": "test", "NetAreaInSqFt": 1655, "FurnishAreaInSqFt": null, "LinearFootHandrail": 95, "LinearFootBeamInternal": 40, "LinearFootBeamSpandrel": null, "NoOfDropsPerSqFt": 0, "ClearStoryHeight": "9\u0027-8\"", "Discount": null, "StartDate": "\/Date(-62135575200000)\/", "StartDateISO3061": null, "EstimatedStartDate": null, "CompletionDate": null, "SequenceNumber": 9, "ShipOutInDay": null, "WorkingDurationInDay": 5, "IsCurrentFloor": null, "IsTemplate": null, "Description": null, "CreatedOn": null, "CreatedBy": null, "UpdatedBy": null, "UpdatedOn": null, "StatusID": null, "StatusName": null, "Comment": "", "SlabDepth": null, "Shores": null, "ShoreOptions": null, "ShoreCSV": "#3 Post Shore" } ] }}
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.
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.