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
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" } ] }}
I am now at the point where I have an empty grid error:
The Grid Is Now Showing NoData
Fig 1 No Data
Fig 2 JSON Response
hierarchical-grid-lod.component.ts
Here is the API Service Snippet as well
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.
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
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.