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 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:
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.