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

[Milos]

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]

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]

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]

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]

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]

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