Nested jqxGrid not populating through HTTP.get() call

[DanParticipant]

I am currently trying to leverage the a nested jqxGrid. I am able to populate the top jqxGrid but struggling with how to fill in the nested jqxGrid rows. I have tried a few approaches and I think it’s coming down to a lack of information on how to properly populate the dataAdapter. I have based my code on the example Angular Nested Grid provided on this site. It took a bit to find a place that I can recreate this issue in working order via a web sandbox. I have found this sandbox that allows me to show my code and how the
let records = this.childDataAdapter.records;
has no records even though I have performed the call
updatebounddata()

Here is a link to the code example in codesandbox.io. As a side note images don’t seem to load correctly for the ngxGrid or Bootstrap in this sandbox. Even though the carrot is missing to drill down in the nested gird, you still can.

[DanParticipant]

I noticed that the Angular documentation references Angular 6 not 5.2.0. I have upgraded the example project linked about to 6.1.0.

It can be found via this link to CodeSandbox.

[DanParticipant]

What I have done as a work around is to use the source _source.localdata on the dataAdapter instead of the records property. I think _source was designed to be used internally by jqxGrid.

let records = this.childDataAdapter._source.localdata;

[adminKeymaster]

Hi Dan,

records property is filled when the binding is completed which could be ASYNC process. I would suggest yo to use the dataAdapter’s loadComplete callback to ensure that binding is completed. After that callback, dataAdapter.records will return data.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[DanParticipant]

Thanks for the response, I was looking through the documentation but I wasn’t sure about the proper way to go about that. I attempted to add it to the
new jqx.dataAdapter()
constructor call but for some reason it was never called. Could you point me to an example I should look at for Angular?

[adminKeymaster]

Something like:

new jqx.dataAdapter(source,
{
loadComplete: function () {

}
}
);

[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()?

[MartinParticipant]

Hello Dan,

Actually, from the logs you have in the loadComplete callback of the data adapters you can see that the childDataAdapter isn’t bound to its source even in the beginning before you retrieve the data with your service.
I’ve noticed that you have “autobind” in the source, but this is not a property of the source. You need it in the childDataAdapter and it is called autoBind:

childDataAdapter = new jqx.dataAdapter(this.childSource, {
    autoBind: true,
    loadComplete: function() {
      console.log("Child data loaded.");
    }
  });

Another thing you need to change is that when you retrieve the data for the sub rows you should bind the childDataAdapter again, instead of calling this.myGrid.updatebounddata();, as this is the main grid and it updates the parent data adapter.

I’ve updated your Sandbox Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[DanParticipant]

This is great! Thank you for the help, I learned a lot about how to work with the grid.

[Author]

Posts