我在ag-grid中使用master / detail。我想在所有行之后的详细部分中保存按钮。我能够使用模板做到这一点,但它没有触发事件。我认为它只是一个模板而且不适用于活动。您能否建议我如何在详细部分添加按钮
这是我的代码
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
如何在详细行的末尾添加保存按钮
答案 0 :(得分: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');
}