带按钮的 Syncfusion 分层网格

Question

如何在 syncfusion 的分层网格中添加按钮及其点击事件并将行数据传递给功能和禁用行数据上的按钮

我想在 syncfusion 网格的子网格中单击按钮。

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

带按钮的 Syncfusion 分层网格

Syncfusion hierarchical grid with button

syncfusion

angular