1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid

Grid

Is there a event to handle the click in parent grid
After click i want to fetch data and show only for that child row, instead of loading ALL data beforehand for child grid



3 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team January 8, 2021 09:51 AM UTC

Hi vin, 

Thanks for contacting Syncfusion support. 

We have analyzed your query at our end. In EJ2 Grid, the detailDataBound and detail-state-change(internal) events will be triggered when clicking the expand/collapse icons. 


The detailDataBound event only triggered at initial rendering of each child-Grid. The detail-state-change event will be triggered all the time when we collapse and expand the child-Grid. Since the detail-state-change is an internal we need to on it in dataBound event of Grid. 
  


[app.component.html] 
  <ejs-grid 
    #grid 
    id="Grid" 
    [dataSource]="parentData" 
    [childGrid]="childGrid" 
    (dataBound)="dataBound($event)" 
    (detailDataBound)="detailDataBound($event)" 
  > 
------ 
  </ejs-grid> 

[app.component.ts] 
export class AppComponent { 
  ---- 
 
  dataBound(args) { 
// on the internal event of detail-state-change 
    this.grid.on("detail-state-change", function(args) { 
// triggered each time when we collapse and expand the rendered child Grid 
      console.log(args); 
    }); 
  } 
  detailDataBound(args) { // triggered at initial expanding of child-Grid 
    console.log(args);     
  } 
} 


In your requirement, you want to load the child Grid data after clicking the expand icon in the Grid. We suggested you use detailDataBound event to achieve your requirement. Find the below sample and code example for your reference. 


[app.component.ts] 
  detailDataBound(args) { 
    console.log(args); 
// load the data to the expanded childGrid 
    args.childGrid.dataSource = new DataManager({ 
      url: 
      adaptor: new ODataAdaptor(), 
      crossDomain: true 
    }); 
  } 
 


Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


VI vin January 17, 2021 04:00 PM UTC

I am getting grid is Undefined



 (dataBound)="dataBound($event)"

dataBound(args) {
    if(this.grid){
    this.grid.on("detail-state-change", function(args) {
      // debugger;
      console.log(args);
    });
  }
  }


RS Rajapandiyan Settu Syncfusion Team January 18, 2021 06:51 AM UTC

Hi vin, 
 
Thanks for your update. 
 
Please ensure the viewChild instances on Grid component is created properly in your application to resolve this issue. 
 
 
[app.component.html] 
  <ejs-grid 
    #grid 
    id="Grid" 
    [dataSource]="parentData" 
    ---- 
  > 
    ---- 
  </ejs-grid> 
 
[app.component.ts] 
import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"; 
----- 
export class AppComponent { 
  @ViewChild("grid", { static: true }) // create the viewchild instance using element name (‘#grid’) 
  public grid: GridComponent; 
  ----- 
} 
 
 
 
Screenshot: 
 
 
 
Since this is a common issue you can refer many online docs to resolve this. 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Up arrow icon