0
490
ViewsOpen Options menu on click event of icon in ag-grid in angular
I have an icon inside ag-grid cell and on the click of icon I am trying to open a popup near the icon which will have edit and delete as below:
I have code as below:
<ag-grid-angular
style="padding-top: 10px;"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
[pagination]="true"
[paginationPageSize]="5"
[defaultColDef]="defaultColDef"
domLayout="autoHeight"
>
</ag-grid-angular>
public columnDefs: ColDef[] = [{
{
headerName: 'Options',
field: 'propId',
cellRenderer: function (params: any) {
let propId = params.value;
const eDiv = document.createElement('div');
var optionsOnHtml = '<i class="icon-options" style="color:#0672CB; margin-right: 10px;padding-right:10px" aria-hidden="true"></i>';
eDiv.innerHTML = optionsOnHtml;
const optionsIcon = eDiv.querySelectorAll('.icon-options')[0];
optionsIcon.addEventListener('click', () => {
// Code here
});
return eDiv;
},
cellStyle: {
borderRightColor: '#e1e1e1',
borderRightWidth: '1px',
borderRightStyle: 'solid',
},
},];
I wanted to know how can I add these two options along with propId so that I can edit / delete the record with propId.
·
Juan Pablo Isaza
1 answers
Answer question0
You will need to add getContextMenuItems in your ag-grid-angular.
<ag-grid-angular
..
[getContextMenuItems]="getContextMenuItems"
></ag-grid-angular>
Then add something like:
getContextMenuItems(params) {
let result = [
{
name: "Edit",
action: () => { this.openEdit(params) }
},
{
name: "Delete",
action: () => { this.openDelete(params) }
}
];
});
return result;
}
And then finally bind this where you are initializing the grid.
this.getContextMenuItems = this.getContextMenuItems.bind(this);
This link should help
·
Juan Pablo Isaza
Report
Answer question