CODEWITHSUNDEEP
angular5ag-grid
apps
apps

Reputation: 343

ag-grid: how to add button in master detail template

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

Upvotes: 5

Views: 2589

Answers (2)

SendETHToThisAddress
SendETHToThisAddress

Reputation: 3714

vinoth's answer has the right idea, but I wanted to give a more complete answer shown a slightly different way. To start with, I had the same issue with the event not firing - this is due to lifecycle events and how things are compiled. If you are using a template (as shown in the question) then you cannot put the onClick event in the HTML in the template, you have to instead do it in TypeScript/JavaScript in the .ts file.

In your HTML where you define the ag-grid div, assign the action method rowGroupOpened. This should be in your HTML file, or possibly in your .ts file (not in the template in grid definitions).

(rowGroupOpened)="rowGroupOpened($event)"

In your .ts file, define the rowGroupOpened event.

RowGroupOpened(params: any) {
    //below pass the id of your button/div used in your template
    const buttonDiv = document.getElementById('saveButton');
    if (buttonDiv){
        buttonDiv.addEventListener('click', (e) => {
            this.myButtonClickMethod();
        });
    }
}

myButtonClickMethod() {
    //do something
}

Your button in the template string should have an id like this:

<button id="saveButton">Save</button>

This way when one of your detail grids expanded it will attach the onClick method at that time. Remember that by default, if a detail grid is not expanded then it doesn't exist/is undefined. Also don't forget to do cleanup/destroy when needed.

Upvotes: 0

vinoth kumar
vinoth kumar

Reputation: 41

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

Upvotes: 2

Related Questions