How to load childGird data asynchronously

[GUU]

Hello,

I am trying to have a hierarchy grid but each child grid data source is gonna be loaded from  a

asynchronous call to an API when the user expands each row.

Is there a known way to do this or could you guide me to a solution? I was reading using the detail data-bound property but I couldn't get to refresh and keep it expanded.

Thanks!

[Pavithra Subramaniyam]

Hi GUU,

Thanks for contacting Syncfusion support.

You can set the dataSource dynamically for the child Grid inside the “detailDataBound” event by using the below way. Please refer to the below code example.

 

detailDataBound = (args) => {

  // Getting instance from the argument

  var grid = args.detailElement.querySelector('.e-grid').ej2_instances[0];

  var data = new DataManager({

    url: 'api/Orders',

    adaptor: new WebApiAdaptor(),

  });

  grid.dataSource = data;

};

 

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[GUU]

Thanks for your reply,

I did what you suggest and I have a problem.

My setup is

<Data Grid>

<Parent Row>

   <Grid Child>

<Parent Row>

   <Grid Child>

</Data Grid>

The behavior I get is that the first time I expand any child Grid it is empty, only after I expand a second child grid (that has the same value for the queryString field) it will show the data.

I think my problem comes from the definition of the queryString. The field I use is not unique.

Why it is showing only after the second expanse? Must queryString be unique? If that's the case, Is there a way to have a hidden parent id column?

Thanks!

[Pavithra Subramaniyam]

Hi GUU,

To work with Hierarchy Grid feature, we need to define the queryString field which will be common for both the parent row and child Grid component. So that the child data will be filtered based on the parent row queryString field value and show the result. But there is no need for the queryString to be unique. For further validation please share the below details that will be helpful for us to provide a better understanding solution as early as possible.

1. Share your sample parent row data and child Grid JSON
2. Share the Grid code example
3. Share an issue reproducible sample if possible.

Regards,

Pavithra S