ag-grid：如何在主详细信息模板中添加按钮

Question

我在 ag-grid 中使用主/详细信息。我想要在所有行之后的详细部分中有一个保存按钮。我可以使用模板来做到这一点，但它不会触发事件。我认为它只是一个模板，不适用于活动。您能否建议我如何在详细部分添加按钮

这是我的代码

columnDefs: [
    {
        headerName: "CompanyName",
        field: "CompanyName",
        cellRenderer: "agGroupCellRenderer"
    }
],
groupDefaultExpanded: 0,
detailRowHeight: 200,
detailCellRendererParams: {
    detailGridOptions: {
        columnDefs: [                            
                    {
                        headerName: "Name",
                        field: "Name",
                        cellRenderer: "agGroupCellRenderer"
                    },
                    {
                        headerName: "Age",
                        field: "Age",
                        suppressFilter: true,
                    },
                    {
                        headerName: "Gender",
                        field: "Gender",
                        suppressFilter: true,
                    }
        ],
        onGridReady: function (params: any) {
            params.api.sizeColumnsToFit();
        }
    },
    getDetailRowData: function (params: any) {
        params.successCallback(params.data.ChannelComponentsVm);
    },
      template:
      '<div style="height: 100%;">' +
      '<div ref="eDetailGrid" style="height: 90%;"></div>' +
      '<div style="height: 10%;"> <button (click)="saveEmployeeDetails()">Save</button> </div>' +
      '</div>'          
}

我无法在单元格渲染器中使用它，因为按钮不在列中。它应该位于子网格的末尾。

-> parent row
   -> child row1
   -> child row2
   -> child row3
          Save button

如何在详细行末尾添加保存按钮

Answer 1

// get ag grid template ref
@ViewChild('agGrid') agGrid: TemplateRef < any > ; 

// attach the click listener on row group opened grid event.
// don't forget to clean up this listener on destroy component event or somewhere in the code
rowGroupOpened(params: any) {
    var saveButton = this.agGrid["_nativeElement"].querySelector(`#saveDetailsButton`);

    if (saveButton) {
      saveButton.addEventListener('click',this.saveEmployeeDetails.bind(this));
    }
}


saveEmployeeDetails(): void {
    console.log('save button clicked');
}