Getting row data from ag-grid using the angular material menu is a straightforward process

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>

Answer №1

After a bit of searching, I was able to find the solution to my question which turned out to be quite simple: The cell template is linked to the data object for each row, allowing access to properties with data.your_property. Surprisingly, I didn't even need to use the onCellClicked event. Here is the code that worked for me:

var columnDefs = [
    {headerName: "", field: "icon", width:65},
    {headerName: "Categories",field:"category_name", width:1025, cellRenderer:function(params){

      // Cell Renderer logic here
},

    {headerName: "", field: "options", width:87, suppressMenu: true, templateUrl:"partials/options.html"
  }
];

option.html

<md-menu>

  <a href="javascript:void(0)" class="option-btn" ng-click="openMenu($mdOpenMenu, $event, **data**)">options</a>
<md-menu-content width="4">
<md-menu-item>
  <md-button ng-click="modifyOptions($event, data)">
    <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="modifyCategory(data)">
    <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="deleteCategory(data)">
    <md-icon md-svg-src="images/icons/delete.svg" aria-label="android "></md-icon>
    Delete
  </md-button>
</md-menu-item>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I apply angular ng-repeat filter with specific criteria in mind?

I am currently developing an angular application and I need to present customer data in a table using ng-repeat. While I have successfully added ng-filter for searching the results based on user input, I am now looking to incorporate checkboxes to further ...

Automated Star/Stop feature with a convenient Save button (the Start/Stop format will display as mm/dd/yyyy hh:mm:ss)

I'm having an issue with the date format in my code. Currently, it displays as Mon Mar 13 2017 19:02:50 GMT-0400 (Eastern Daylight Time), but I need it to be in the format mm/dd/yyyy 00:00:00 am/pm. My challenge is to capture the current date and tim ...

TextAngular failing to replace &nbsp character

I am currently using textAngular within a div that has a character counter feature. However, I have encountered an issue where a space ( ) is being counted as 6 characters instead of just one. Despite trying various regex patterns to convert this spec ...

Using a union type annotation when passing into knex will result in the return of an unspecified

Knex version: 2.5.1 Database + version: postgres15 When passing a union typescript definition into knex as a type annotation, it returns the type any. However, by using type assertion as UserRecord, we can obtain the correct UserRecord type. It is my un ...

Problems with Glitching and Distortions in the Web Audio API

Hey there! I recently delved into exploring the web audio API and put together a simple synthesizer to get familiar with its features. However, I've encountered an issue where the audio gets distorted when subjected to intense sound input. If anyone w ...

Node.js route leads to a 404 error page due to a simple configuration

Trying to set up two separate routes using NodeJS with the express framework and Angular on the client side. The index page successfully renders at localhost:3000/. However, when attempting to render the login page by visiting localhost:3000/login, a GET / ...

Concealing Popover with internal click

I am currently implementing Vue-PopperJS in my project, following the setup provided on the linked page with a few modifications: <template> <Popper ref="popover" trigger="clickToToggle" :options="{ pla ...

Utilizing AngularJS to perform mathematical calculations through ng-model and ng-click buttons, displaying the results within a web application

Embarking on my AngularJS journey, I am gradually delving into its complexities. Lately, I've been engrossed in unraveling the intricacies of calculating between ng-models (scopes) within a web application. As an illustration of my current endeavor, ...

Sending JSON data from an iOS app to a Flask backend

Within my Flask Python web application, I store certain parameters in SessionStorage to later send back to Flask and save this data as a text file. Interestingly, the process functions perfectly on PCs and Android devices but encounters issues on iOS devi ...

Custom transaction settings for Mongoose

When conducting transactions, we often have the ability to customize certain options. For example, we can specify transaction options like the ones shown below: const transactionOptions = { readPreference: 'primary', readConcern: { level: &ap ...

What are your thoughts on Uptrends vs Dynatrace for Website Monitoring?

I'm seeking recommendations for improving monitoring on a retail website. Any advice would be appreciated. Thank you in advance. ...

Display a compilation either in the backend or the frontend

I'm fairly new to NodeJS and I could really use some advice. I currently have a webpage that displays a list of users, which is retrieved from a collection using Mongoose. I am aware of two different ways to display this list: 1) One option is to que ...

Creating a mapping strategy from API call to parameters in getStaticPaths

I am attempting to map parameters in Next.js within the context of getStaticPaths, but I am facing issues with it not functioning as expected. The current setup appears to be working without any problems. https://i.stack.imgur.com/LeupH.png The problem a ...

Using JavaScript, delete a class from an element

I am looking for a way to remove a specific class attribute from all elements on a webpage. The challenge is that I only have the class name as a reference, and cannot use any other identifiers like id or another class. Additionally, I cannot rely on JavaS ...

Focus on a specific data set within a JSON file when working with Backbone.js

Hello! I am new to learning Backbone.js and would love some suggestions from the experts out there. Here is a snippet of my code: app.Collections.UserCollection = Backbone.Collection.extend({ model: app.Models.IdModel, url: "/test/test_data.json" ...

AngularJS service for exchanging information among controllers

I am working on an AngularJS application (1.4.10) where I need to share data between two controllers. To achieve this, I created a factory: .factory('CardsForService', function($http, URL){ var service = { "block_id": '', ...

Loading complex models with Three.js

Whenever I attempt to load a significantly large file utilizing the appropriate loaders provided by the library, the tab in which my website is running crashes. Despite trying to implement the Worker class, it doesn't seem to resolve the issue. Here i ...

Eavesdrop on outbound requests on a web page using JavaScript

As I develop a single-page application that integrates a third-party analytics tool (such as Heap, Segment, Mixpanel, etc.), I am looking to actively monitor the outgoing HTTPS requests from my app and take necessary actions, such as logging. I am curious ...

What is preventing Javascript from executing a function when there is an error in another function?

Can you explain why a JavaScript function fails to run if there is an error in another function? Recently, I encountered an issue on my HTML page where the alert from the popup1() function would not load. It turns out the problem stemmed from an error in ...

Caution: It is not possible to make updates on a component while inside the function body of another component, specifically in TouchableOpacity

I encountered this issue: Warning: Trying to update a component from within the function body of another component. Any suggestions on how to resolve this? Interestingly, the error disappears when I remove the touchable opacity element. ...