1. Home
  2. Forum
  3. Angular - EJ 2
  4. Dynamically load child data grid

Dynamically load child data grid

Hello,

I am trying do load data dynamically in hierarchical structure.
I am using your example in Plunker from documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/hierarchy-grid.html#dynamically-load-child-grid-data

When data is added in method detailDataBound, every time first load (on expanding row) shows empty childGrid:


First I opened first row and get empty childGrid, then I opened third childGrid and get its data.
When I set all data first load, I am getting data correctly:


How can I avoid that problem and get needed childGrid on detail data bound method?

5 Replies
PS Pavithra Subramaniyam Syncfusion Team June 18, 2018 12:59 PM UTC

Hi AC, 

We have checked your query and you can dynamically load the child Grid data in the load event of Parent Grid. We have prepared a simple sampel based on your query. Please refer to the below code example, Documentation link and sample link. 

However, We have created a task to change the documentation for dynamically load the Child Grid data and it will be refreshed in any of our upcoming release. 

[component.ts] 
@Component({ 
    selector: 'app-container', 
    template: `<ejs-grid #grid (load)='load($event)' [dataSource]='pData' height='265px' [childGrid]='childGrid' > 
                .   .   . 
                </ejs-grid> 
                `, 
    providers: [DetailRowService] 
}) 
export class AppComponent implements OnInit { 

    public pData: Object[]; 
    public childGrid: GridModel = { 
        queryString: 'EmployeeID', 
        columns: [ 
             .   .  . 
        ], 
    }; 
    @ViewChild('grid') 
    public grid: GridComponent; 

    ngOnInit(): void { 
        this.pData = employeeData; 
    } 

    load(args: any): void { 
        this.grid.childGrid.dataSource = data; // assign data source for child grid. 
    } 

} 


Sample                : https://plnkr.co/edit/4CQgrh279j2XHnCWr6N6?p=preview  

Regards, 
Pavithra S. 



UN Unknown Syncfusion Team June 20, 2018 02:17 PM UTC

Hello,

it is not the same to do it on load and on detailDataBound methods, because I want to get and set data only when I am opening my row. I want to add dataSource only to that row I am opening.

My data is too big to load everything on grid load. I am getting data on row opening, but I can not to set it to be visible. I am always getting - No records to display


Also one more question - how can I trigger child grid event detailDataBound?

Now I trying to do it like that, bet event never triggers:
myGrid.childGrid = {
     columns: this.columns,
     queryString: this.queryString,
     detailDataBound: function(args: any) {
          console.log(args)
     }
}

PS Pavithra Subramaniyam Syncfusion Team June 21, 2018 12:51 PM UTC

Hi AC, 

Query #1:  I want to get and set data only when I am opening my row.   

We have checked your query and you can dynamically load the data to the child Grid by load event of Child Grid. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

[component.ts] 
@Component({ 
    selector: 'app-container', 
    template: `<ejs-grid #grid [dataSource]='pData' height='265px' [childGrid]='childGrid' > 
                    <e-columns> 
                    .    .    . 
                    </e-columns> 
                </ejs-grid>`                 
}) 
export class AppComponent implements OnInit { 
    public childGrid: GridModel = { 
        queryString: 'EmployeeID', 
        load: function(args:any){ 
              this.dataSource = orderDatas 
            }, 
        columns: [ 
              .   .   . 
        ] 
    }; 
} 


Sample               : https://plnkr.co/edit/LuLqqVV3anyvTb6KQjQp?p=preview  

Query #2:  how can I trigger child grid event detailDataBound? 
 
You can add the detailDataBound event in the childGrid itself. Please refer to the below code example and sample link. 
 
[component.ts] 
@Component({ 
    selector: 'app-container', 
    template: `<ejs-grid #grid [dataSource]='pData' height='265px' [childGrid]='childGrid' (detailDataBound)='onDetailDataBound($event)'> 
                    <e-columns> 
                         .    .   . 
                    </e-columns> 
                </ejs-grid> 
                 
}) 
export class AppComponent implements OnInit { 
    .  .  . 
    ngOnInit(): void { 
        this.pData = employeeData; 
         .   .   . 
        this.childGrid = { 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            detailDataBound:function(args: any) { 
            console.log(args) 
            }, 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                .  .  . 
        ] 
        }; 
    } 
} 
 

Regards, 
Pavithra S. 


FS Fernando Stein July 17, 2020 01:30 PM UTC

Hello, just refresh the childGrid after load the respective data:

onDetailDataBound(args: any): void {
   const loadedChildData = this.grid.childGrid.dataSource;
     
  // 'data' represents data only for children of this row
   loadedChildData.push(...data);
   this.grid.childGrid.dataSource = loadedChildData;

  // refresh the childGrid of the current row
   args.childGrid.refresh();
}

BS Balaji Sekar Syncfusion Team July 20, 2020 12:28 PM UTC

Hi AC, 
 
By default, the common dataSource were maintained by ChildGrid so each child grid binds the dataSource based on parent grid row details that should be relevant between parent and child Grid dataSource using childGrid's queryString property. Since we have changed the childGrid dataSource and updated to corresponding childGrid in detailDataBound event. For more information please refer to the following code example and sample 
[app.component.ts] 
 
 onDetailDataBound(args) {  
    args.childGrid.dataSource = [];  // Modify childGrid dataSource 
    args.childGrid.refreshColumns(); //refresh grid for changes will apply 
  } 
 
 
 

 
If we misunderstood your query, please share more details about your requirement to us that will help to validate further. 
 
Regards, 
Balaji Sekar 


Loader.
Up arrow icon