In Hierarchical Grid, How do I Refresh Data in Child Grid?

[James]

Sir, I have a Hierarchical grid in which I am updating the data in the child grid. 

When my data changes, the callback 'setDataAsArrayChild() is being successfully called with new data that has been sliced.

I am calling Grid.refresh()  , (or Grid.refreshColumns()) on the child grid instance. However the child grid will not refresh.

How do you refresh the child grid when data changes?

    //Callback when data loaded

    protected setDataAsArrayChild(data: LosJSON[]): void {

        console.log(">>Setting Data");

        this._gridModel.dataSource = this.gridData;

        this.sfGrid.refreshColumns();

    }

[Prasanna Kumar Viswanathan]

Hi James, 

 

Thanks for contacting Syncfusion support. 

 

Based on your query you need to refresh the child with new data. Before we proceed with query, please share the details 

 

1. You have mentioned when the data changes the callback 'setDataAsArrayChild()’ is being successfully called with new data that has been sliced. So, here the data changes means that you are mentioning the parent data or any other? 

 

2. Share the code example that how the 'setDataAsArrayChild()’ has been called. 

 

3. Share the complete code example of a Grid. 

 

Regards, 

Prasanna Kumar N.S.V 

[James]

Its very simple. Just use your example here https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/?no-cache=1

In that example, your child grid bind to a data source 'data' which  appears to be an object[].

In the parent Grid, and in all other grids that bind from the HTML, if  I copy the data:object[] to a new object 'data2:object[] and make some changes, then

in the ts class  assign datasource = data2, the grid will update.

However in the Child grid, when the data is changes in the data:object[] copied and assigned to 'datasource' the child grid does not update. 

You can see in my code(pasted below)  i simply pass in a new data object of type:ILosJSON[], which is just a JSON file, then I assign to the child grid model this._gridModel.datasource = data. Normally this is enough to refresh the data. 

When I call refresh() on the child Grid object, it does not refresh.

    //Callback when data loaded

    protected setDataAsArrayChild(data: LosJSON[]): void {

        this._gridModel.dataSource = data;

        this.sfGrid.refresh();

        }

    }

[James]

I created a demo. If you click the 'Update Parent' button the name in id 1 changes to ben and the grid updaes

If you click the update child, when the child is open, the ShipCity name of OrderID 10258 is changed, but the grid does not change

https://stackblitz.com/edit/angular-f151306-saf5ud

[Sujith Kumar Rajkumar]

Hi James, 

In hierarchical grid each parent will have its own child grid element rendered to it based on the queryString value. The child grid that you have mentioned represents the overall object of all the child grids data and does not contain element instance for each individual child grid. So if the child grid data source is updated the overall object alone will be updated since it does not know to which child grid element the data needs to be updated. For e.g. – If four rows in the parent grid are expanded then under each node a child grid will be rendered. So if the data source is updated in the overall child grid’s data object it does not know on which child grid the data needs to be updated. So in this scenario the grid’s refresh method needs to be called while updating the child grid’s data source since this gets re-rendered with the updated data source. 

Sample for your reference, 

Sample: https://stackblitz.com/edit/angular-f151306-epoufb?file=app.component.ts 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[James]

Hello, sorry for the late reply (4 years!), better late than never.

In your example you  provided, the updating of the child data unfortunately causes the hierarchy to all reset back to level 0 only (all children closed)

1. Is there any way to update the data in a child grid without the hierarchy all resetting?
2. Is it possible to get the Grid object of the child grid? If so I could call refresh() on it and perhaps this will update only the child table in question. I can not find any way to get the child grid object.
3. Or perhaps if i bound the data to an observable? Would this work? How would I do it?

James

[Vikram Sundararajan]

Hi James,

Query 1: Is there any way to update the data in a child grid without the hierarchy all resetting?

We understand your concern about expanded rows being automatically collapsed after update the child grid data programmatically. Want to prevent the collapse in the first place. The behavior you described is indeed the default functionality of the hierarchy grid. When data was updated, resulting in changes to the underlying data source, the grid undergoes a re-rendering process. During this process, any previously expanded rows are collapsed as part of the default behavior.

Query 2: Is it possible to get the Grid object of the child grid?

We can get both child grid instance from the created event of the child grid or the detailDataBound event of the parent grid. The code snippet of the implementation and sample have been attached for your reference.

  app.component.ts

 

detailDataBound(args) {

    var childGridInstance = args.childGrid; //childGrid instance

    console.log(childGridInstance);

  }

  created() {

    var childGridInstance = this; //childGrid instance

    // console.log(childGridInstance);

  }

Sample: https://stackblitz.com/edit/angular-f151306-7vkmal?file=app.component.ts

Created: https://ej2.syncfusion.com/documentation/api/grid/#created

detailDataBound: https://ej2.syncfusion.com/documentation/api/grid/#detaildatabound

Please let us know if you need any further assistance.

Regards,

Vikram S