ag-grid:如何在主详细信息模板中添加按钮 [英] ag-grid: how to add button in master detail template

问题描述

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

这是我的代码

columnDefs: [{headerName: "公司名称",字段:公司名称"，cellRenderer:agGroupCellRenderer"}],groupDefaultExpanded: 0,细节行高度:200，detailCellRendererParams:{详细网格选项:{列定义:[{headerName: "名称",字段:名称"，cellRenderer:agGroupCellRenderer"},{headerName: "年龄",字段:年龄"，抑制过滤器:真，},{headerName: "性别",字段:性别"，抑制过滤器:真，}],onGridReady:函数(参数:任何){params.api.sizeColumnsToFit();}},getDetailRowData:函数(参数:任何){params.successCallback(params.data.ChannelComponentsVm);},模板:'<div style="height: 100%;">'+'<div ref="eDetailGrid" style="height: 90%;"></div>'+'<div style="height: 10%;"><按钮(点击)="saveEmployeeDetails()">保存</button>

'+'</div>'}

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

->父行->子行 1->子行 2->子行 3保存按钮

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

解决方案

//获取 ag 网格模板 ref@ViewChild('agGrid') agGrid: TemplateRef <任何 >;//在行组打开的网格事件上附加单击侦听器.//不要忘记在销毁组件事件或代码中的某处清理这个监听器rowGroupOpened(参数:任何){var saveButton = this.agGrid["_nativeElement"].querySelector(`#saveDetailsButton`);如果(保存按钮){saveButton.addEventListener('click',this.saveEmployeeDetails.bind(this));}}saveEmployeeDetails(): void {console.log('点击保存按钮');}

I am using master/detail in ag-grid. I want a save button in detailed section after all rows. I am able to do that using template, but its not firing the event. I think its just a template and don't work for event. Can you please suggest me how can I add button in detailed section

here is my code

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>'          
}

I cannot use it in cell renderer as the button is not in column. It should be at the end of the child grid.

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

How to add save button at the end of detailed rows

解决方案

// 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');
}

这篇关于ag-grid:如何在主详细信息模板中添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！