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.
Unfortunately, activation email could not send to your email. Please try again.

Hierarchy Grid does not render child grid. Child grid is empty

Thread ID:

Created:

Updated:

Platform:

Replies:

130474 May 15,2017 04:12 AM May 22,2017 12:40 PM Angular 5
loading
Tags: ejGrid
Milos
Asked On May 15, 2017 04:12 AM

Hi,
I have problem to render child grid inHierarchy Grid.
My view is:
Model:
gridData: any = [];
gridChildData: any = [];
childGrid: any = {
dataSource: this.gridChildData,
queryString: "EmployeeID",
columns: [
{ field: "OrderID", headerText: 'OrderID' },
{ field: "ShipCity", headerText: 'ShipCity', },
]
};
ngOnInit() {
this.someService.getData()
.subscribe(data => {
this.gridData = data.grid;
this.gridChildData = data.gridChildData;
});
}
The problem is that all my child grids are always empty.
I get grid data from service with observable in ngOnInit method.
Data I get from service are:
var gridData = [
{EmployeeID: 12, FirstName: "Name1"},
{EmployeeID: 13, FirstName: "Name2"},
{EmployeeID: 14, FirstName: "Name3"}
];
var gridChildData= [
{EmployeeID: 15, OrderID: 12, ShipCity: "City1"},
{EmployeeID: 14, OrderID: 13, ShipCity: "City2"},
{EmployeeID: 13, OrderID: 14, ShipCity: "City3"}
];
I do not know what I am duing wrong here ?

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 16, 2017 08:56 AM

Hi Milos, 

In this we suspect that the child grid dataSource has been stored as undefined. So, the child grids will always empty. To avoid this issue, we suggest you to declare the variable before you initialize the child Grid. 

Find the code example: 


export class AppComponent { 

public gridChildData= [ 
                  {EmployeeID: 15, OrderID: 12, ShipCity: "City1"}, 
                  {EmployeeID: 14, OrderID: 13, ShipCity: "City2"}, 
                  {EmployeeID: 13, OrderID: 14, ShipCity: "City3"} 
   ]; 
public childGrid = { 
dataSource: this.gridChildData
queryString: "EmployeeID", 
actionBegin : function (args) { 
     debugger; 
}, 
columns: [ 
                { field: "OrderID", headerText: 'OrderID' }, 
                { field: "ShipCity", headerText: 'ShipCity', }, 


If you still face the same issue, please get back to us with the code example of a Grid.   

Regards, 
Prasanna Kumar N.S.V 
 


Milos
Replied On May 16, 2017 10:06 AM

Hi Prasanna,

Sorry maybe I was not clear in my explanation.
I also forgot to post my view:

<ej-grid [dataSource]="gridData" [childGrid]="childGrid">
    <e-columns>
        <e-column field="EmployeeID" headerText="EmployeeID"></e-column>
        <e-column field="FirstName" headerText="FirstName"></e-column>
    </e-columns>
</ej-grid>


Model: 

gridData: any = [];
gridChildData: any = [];

childGrid: any = {
dataSource: this.gridChildData,
queryString: "EmployeeID",
columns: [  
{ field: "OrderID", headerText: 'OrderID' },  
{ field: "ShipCity", headerText: 'ShipCity', },
]
};
ngOnInit() {
this.someService.getData()  
.subscribe(data => {  
this.gridData = data.grid;  
this.gridChildData = data.gridChildData;
});
}


As you can see above, my child grid data are not undefined, it is empty array  (gridChildData).
My real data, I do not have at the moment of the defining grid. I will get them in ngOnInit method after some time.
Data I post in previous comment are just example what I get from the server in ngOnInit method, just to show you how I match/connect main grid  and child grid data.

I assume that problem is grid, it does not refresh child data, only refresh main data after data comes from the server.

I hope so I it is a bit clearer now.

Regards,
Milos 

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On May 19, 2017 07:55 AM

Hi Milos, 
 
We are able to reproduce your reported problem “ChildGrid gets empty” when binding remote data services on “ngOnInit” method or apart from defining the Grid directly. This problem was due to the dataSource for childGrid data get loads, after the completion of the Grid rendering.  So we suggest you to bind the remote service data directly to the "dataSource" property of the childGrid. Please refer to the below code example:- 

export class AppComponent { 
 
        public gridChildData; 
        public childGrid = { 
            dataSource:  ej.DataManager({ 
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",  
                offline: true,    
            }); 
        queryString: "EmployeeID", 
        actionBegin : function (args) { 
                    }, 
        columns: [ 
             { field: "OrderID", headerText: 'OrderID' }, 
             { field: "ShipCity", headerText: 'ShipCity', }, 
        ] 
 
    } 
    public editTemp; 
    public tool = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] } 
    public gridData; 
    public dataManager; 
    ngOnInit() { 
        this.gridData = window.employeeView; 
    } 
   } 
} 


In this above example, we have bound the OdataService to the Grid. If you are in need of any other ejDataManager such as (Url adaptor, RemotesaveAdaptor, WebApi.. ) you can also bind into the Grid. Also when we give offline property of the Grid as true, the DataManager requests the server only once and further data manipulation operation can be done at client side itself. 
 
Please refer to the Help document about DataAdaptors:- 

https://help.syncfusion.com/js/datamanager/data-adaptors 
 
 If you facing any difficulties regarding this ,could you please share us the following details. 

1. Grid code example ( app.component.html and app.component.ts) file. 

2. What type of services you have bind to the Grid. 

3. If you are facing any issue, share the screenshot/video. 

4. Stacktrace of the issue, if any script error occurs. 


Regards, 

Farveen sulthana T 


Milos
Replied On May 19, 2017 04:41 PM

Hi Farveen,

You say that problem is because my child data grid is loaded after grid is rendered.
This is standard procedure that component is rendered and we get data with promise after it to avoid blocking of page rendering.

1) What is the difference if I make adapter to get grid data asynchronously or I do that by my self and add to grid data source, like I did now ?
2) Is there any refresh grid method which I can call when my child grid data are ready ?


Regards,
Milos

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 22, 2017 12:40 PM

Hi Milos,  

Query #1: What is the difference if I make adapter to get grid data asynchronously or I do that by my self and add to grid data source, like I did now ? 

The default support collects the records from the server on its own action and it doesn’t need external action assign the datasource to the child Grid. Grid will handle the datasource binding from its own url action.  

Query #2: Is there any refresh grid method which I can call when my child grid data are ready ? 

Since there is no data bound to the child Grid instance, we cannot refresh it. So we suggest to use the adaptor binding of the child Grid. 

Regards,  
Prasanna Kumar N.S.V 


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.

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.

;