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