We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

151339 Feb 7,2020 08:31 AM UTC Feb 12,2020 02:14 PM UTC Angular - EJ 2 4
loading
Tags: Grid
James
Asked On February 7, 2020 08:31 AM UTC

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(dataLosJSON[]): void {
        console.log(">>Setting Data");
        this._gridModel.dataSource = this.gridData;
        this.sfGrid.refreshColumns();
    }



Prasanna Kumar Viswanathan [Syncfusion]
Replied On February 10, 2020 03:43 PM UTC

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
Replied On February 12, 2020 04:56 AM UTC

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(dataLosJSON[]): void {
        this._gridModel.dataSource = data;
        this.sfGrid.refresh();
        }
    }


James
Replied On February 12, 2020 05:31 AM UTC

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 [Syncfusion]
Replied On February 12, 2020 02:14 PM UTC

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, 


Let us know if you have any concerns. 

Regards, 
Sujith R 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon