Hierarchical Grid: Child Templates, Child Refresh State Persistence

[James]

Sir, a few questions with regard to Hierarchical Grid

1. Can the Child Grid be defined in a ng-template in HTML?

All examples of the Hierarchical grid define the child in the in the typescript code.  The challenge with the grid defined in typescript code is that data bindings to the grid need to be managed programatically. When data changes in the child grid ( settings data such as  'allowPaging', grid data and column bound data such as 'textAlign'), then when data changes the grid must be refreshed. 

The problem with a grid.Refresh() is that it closes all the child and grandchild grids, resetting not only the data, but the view of the grid itself.  I am hoping that binding in HTML may cause the grid bound elements to refresh on their own without requiring to call 'Refresh() on the child and grandchild grids. The parent grid does bind correctly without the need to call Refresh()

2. Can the state of the Grid preserved during Refresh() -How can I refresh child data without the child data grid closing?

As mentioned above, whenever child data changes the only way to reflect those changes in the Child Grid is to call Refresh() on the parent grid. Calling Refresh() closes all child and grandchild grids. This is most annoying as simple use cases become impossible. Say Column Y value updates in response to Column X entry. The update only occurs after Refersh() and then the whole grid resets to every child and grandchild closed.  It makes the child grid useless for anything other than basic data entry. The child grid can never have the feature richness of the parent grid.

One solution is to query to current view state of the grid before a refresh (which child and grandchild grids are open), and then reopen them after refresh(). But this is not ideal as it will cause the grid to 'flicker'

How can I refresh child data without the child data grid closing?

James

 

[Sujith Kumar Rajkumar]

Hi James, 

 

Greetings from Syncfusion support. 

 

Query - 1: “Can the child grid be defined inside ng-template in html” 

 

The child grid cannot be defined inside the ng-template since the grid’s architecture is that under each parent row a separate child grid is rendered and value is set based on the parent’s queryString property. This operation cannot be processed properly by rendering a single child grid using the template and using this dynamically to render different child grids on expanding the parent and that is why the child grid needs to be rendered as a separate object model based on which they are rendered under each parent. 

 

Query - 2: “Preserving the state of child grid on refreshing the parent grid” 

 

As we previously mentioned in this forum, in hierarchical grid each parent will have its own child grid element rendered to it and value will be set based on the queryString property. The child grid object assigned to the parent represents the overall object of all the child grids data/model which is used for rendering separate child grid’s on expanding each parent and does not contain element instance for each individual child grid. So if the child grid data source/model 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 to and in this scenario the grid’s refresh method needs to be called for re-rendering the grid with the updated data source. This is the grid’s behavior. 

 

However there are two ways for changing the child grid’s data without refreshing the parent grid which are, 

 

• As you suggested storing the grid’s current state(Expanded child grids) and then expanding them dynamically after refreshing them.
• Another method would be get all the child grid’s element using the ‘e-detailrow’ class, creating instance for the grid element inside it and then appending the modified data to this grid’s data source. But this would mean updating the data source for all the open child grid’s and can only be performed on first level child grid. Even in this case updating the child grid’s data source will refresh the child grid element resulting in collapsing its child elements. You can find the sample based on this scenario for your reference below,

 

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

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R