Reply To: Nested jqxGrid not populating through HTTP.get() call

[DanParticipant]

Sorry it has taken so long to respond, I was distracted by another work project. I have updated my Code Sandbox IO to reflect some more digging that I have done to assist in troubleshooting.

Based on where we left off, I was to add an object to the new jqx.dataAdapter() call. Looking something like this

  dataAdapter = new jqx.dataAdapter(this.source, {
    loadComplete: function(){
      console.log("Parent data loaded.");
      //Some variable to track when the load was complete.
    }
  });

One problem I ran into in trying to add a variable or update a variable to track when loading is complete, is that the scope has changed, “this” is now local to the dataAdapter instead of being part of my component class. This means I can’t touch anything outside of the object the loadComplete function is in.

So I started to do some more debugging.

Thing to keep in mind, which you can see in the codesandbox link, is there are two different dataAdapters. So I added the method to the parent dataAdapter and the child dataAdapter. For the parent loadComplete I log to the console “Parent has loaded.”, for the child I I log “Child has loaded”.

When I retrieve the data for the Parent and Child I call this.myGrid.updatebounddata();. This is where the logging points out a problem, the child loadComplete is never executed. Instead the parent loadComplete runs twice.

I went a step further and added logging to the initRowDetails method. I console.log’d what is in the childSource and what is in childDataAdapter, we can see the data in childSource but childDataAdapter has no records in it, but childDataAdapter._source.localdata does have the actual data.

I think there is a disconnect telling the grid to bind data from childSource.localdata to childDataAdapter.records. Is there another function I should be calling instead of this.myGrid.updatebounddata()?