I have a specific requirement in ag-grid where I need to implement a menu to add/edit/delete row data. Currently, I am using the angular material menu component as the cell template URL. However, I am facing an issue where when I click on the menu item, it does not trigger the onCellClicked event in ag-grid to access the clicked row data. Interestingly, if I click away from the menu item, the event is fired. I need assistance in determining how to retrieve row data when clicking on the menu.
Here is my ag-grid code:
var columnDefs = [
{headerName: "", field: "icon", width:65},
{headerName: "Categories",field:"category_name", width:1025, cellRenderer:function(params){
// custom cell renderer logic
},
onCellClicked:function(params){
console.log("Cell still gets clicked "+params.data);
//This click event is not triggered
},
{headerName: "", field: "options", width:87, suppressMenu: true, templateUrl:"partials/options.html"
}
];
contents of options.html
<md-menu>
<a href="javascript:void(0)" class="option-btn" ng-click="openMenu($mdOpenMenu, $event)">options</a>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="modifyOptions($event)">
<md-icon md-svg-src="images/icons/add.svg" aria-label="android "></md-icon>
Add
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="toggleNotifications()">
<md-icon md-svg-src="images/icons/edit.svg" aria-label="android "></md-icon>
Edit
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button disabled="disabled" ng-click="checkVoicemail()">
<md-icon md-svg-src="images/icons/delete.svg" aria-label="android "></md-icon>
Delete
</md-button>
</md-menu-item>
</md-menu-content>