Syncfusion hierarchical grid with button

Question

How to add button and its click event and pass row data to function and disabled button on row data in hierarchical grid of syncfusion

I want button click in childgrid of syncfusion grid.

Answer 1

Based on your requirement, we have created a sample. In the below sample, we have rendered button in child/ hierarchy grid using template property and bind click event for the button and pass the target and get the corresponding child grid instance and get row information using getRowInfo method. 

Please refer the below sample and code example for more information. 

   import { employeeData, orderDatas, customerData } from "./data"; 
import { DetailRowService } from "@syncfusion/ej2-angular-grids"; 
import { parentsUntil } from '@syncfusion/ej2-angular-grids';   
@Component({ 
  selector: "app-root", 
  templateUrl: "app.component.html", 
  providers: [DetailRowService] 
}) 
export class AppComponent { 
  ngOnInit(): void { 
    this.parentData = employeeData; 
    this.childGrid = { 
      dataSource: orderDatas, 
      queryString: "EmployeeID", 
      . . . . .  
      columns: [ 
        { 
          field: "ShipName", 
          headerText: "Ship Name", 
          width: 150, 
          template: `<button onClick="update(event)">Click</button>` 
        } 
      ] 
    }; 
  } 
} 
(window as any).update = function(args) { 
  var grid = (parentsUntil(args.target, 'e-grid') as any);  //pass the element and selector and get corresponding child grid instance 
  console.log(grid.ej2_instances[0].getRowInfo(args.target).rowData); 
}; 

sample

documentation