ng-grid cell onclick callback

Currently, I am working with ng-grid and am attempting to define a callback function for when a cell is clicked. During this callback, it is crucial for me to identify the specific row and column of the cell that was clicked. Upon exploring various options, I decided that embedding an onclick event within the cellTemplate in columnDefs for each column seemed to be the most effective approach, despite the redundancy it introduced:

$scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{field: 'name', displayName: 'Name',
                  cellTemplate: '<div onclick="...">{{row.entity[col.field]}}</div>'
                  },
                  {field: 'age', displayName: 'Age', cellTemplate: ...}
                ]
};

However, I encountered challenges with this method as ng-click was ineffective, and integrating the controller's scope with onclick proved to be unviable.

Any alternative solutions that do not rely on ng-grid are also greatly appreciated.

Answer №1

Regrettably, ng-grid lacks a solid method for retrieving the column number.

If you are satisfied with just the row number, you can refer to the following plunker for guidance:

http://plnkr.co/edit/abc123XYZ?utm_source=excerpt

You can utilize the beforeSelectionChange function, which contains the rowItem with the row number information.

Alternatively, you can modify the cell template to include a data attribute for each cell with the row and column number, then set up an event listener for the click event on that. Although it may require some repetition with columnDefs and not be entirely DRY, it will be slightly more organized than your current approach.

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

When using multer to upload a file, the issue of req.files being undefined may

I am currently working on a Node.js Application using Express.js 4 that involves uploading an image. I opted to utilize the multer module for this task, but encountered an issue with accessing the uploaded file via req.files. Below is the relevant portions ...

One way to concatenate texts in an array of dictionaries while keeping the order intact in JS/React is to compare and match specific key-value pairs

My dataset looks something like this: Record= [ { "tid":1, token_text": "Canis", "spanid": 1, "label": "Name" }, { "tid":2, "token_text": "Familiaris", "spanid": ...

Tips for maximizing performance in ember-data through r.js

After making the switch to ember-data#canary, I encountered a problem with r.js failing. [Error: Error: ENOENT, no such file or directory '/scripts/lib/ember-data/ember-data/core.js' In module tree: app/main app/app embe ...

Bizarre Behavior of String Comparison in Typescript When Using String.toLowerCase

As someone who is naturally curious (and has no background in JS), I have decided to take the plunge into Typescript. However, I seem to have hit a roadblock. I am trying to compare two strings but want to make it easier by first converting them to lowerca ...

Display alternative text dynamically

Trying to gain a deeper understanding of state in react, this is a perfect example to me. When I say dynamic, I mean displaying the output below instantly as it is entered in the form. class Demo extends Component { constructor(props) { super ...

What steps should I take to resolve this issue? ERROR TypeError: Unable to access property 'user' of null object

Is there a way to resolve the error I'm encountering in my project? The error message is: ERROR TypeError: null is not an object (evaluating 'userdata.user'). Using React Native Expo, I am facing this issue after logging into my app and navi ...

Locate an item based on the `Contains` criterion by utilizing Express and Mongoose

Looking to find items in my collection that have userName containing adm. Expecting 2 results based on having records with userNames like admin0 and admin2, but the search returns nothing. The query being used is: Person .find({ userName: { $in: &a ...

Mobile compatibility in ECMAScript 5.1 is essential for creating seamless user

Is there a reliable source for information on ECMAScript 5.1 compatibility with mobile browser devices? ...

What is the process of transferring a variable from the view to the $scope using the $window service?

How can I properly initialize data using ng-init and retrieve it in a controller? Within my view form, I have an input field like this: <input class="form-control" type="text" id="name" name="name" ng-model="type.name" required="tr ...

How can I use JavaScript to trigger a button click event inside an iframe element

Is there a way to retrieve the inner HTML contents of a clicked element in an iframe loaded content using JavaScript? This code uses jQuery: var elements = document.getElementsByTagName('iframe'); [].forEach.call(elements, function(elem ...

Steps to show an input button and exit the current window

I am looking for guidance on how to enable or display an input on a webpage if an ajax call is successful. I want this input, when clicked, to be able to close the current window using JavaScript. What would be the most efficient way to accomplish this? B ...

How can we enforce that the input consists of digits first, followed by a space, and then

Can regex (with javascript possibly) be used to mandate numbers, followed by a space, and then letters? I'm a bit lost on where to start with this... I understand that using an HTML5 pattern would work for this... [0-9]+[ ][a-zA-Z0-9]+ However, I ...

The CSS legend for a FLOT plot chart is being unexpectedly replaced

I am currently exploring the FLOT plot tool and facing difficulty with the legend display. It seems that the CSS styling for the legend is somehow being overridden in my code, resulting in an undesirable appearance of the legend: Even when I try to specif ...

Are you interested in creating dynamic tables/models with Sequelize?

Currently, I am exploring a theoretical question before diving into the implementation phase. The scenario is as follows: In my application, users have the ability to upload structured data such as Excel, CSV files, and more. Based on specific requirement ...

When incorporating express.static(), the Express .use() callback may be triggered multiple times

I'm in the process of verifying a user's identity, and once that is confirmed I aim to add them as a new user in my personal database using the information provided by the authentication server. The issue at hand is that the function createNewAc ...

Neither Output nor EventEmitter are transmitting data

I am struggling to pass data from my child component to my parent component using the Output() and EventEmitter methods. Despite the fact that the emitter function in the child component is being called, it seems like no data is actually being sent through ...

Issue with triggering the change event for <select> tag

Whenever the selected value of the drop down changes, the following code does not work as expected. Please make corrections if any errors are present. <!doctype html> <html lang="en"> <head> <meta charset="utf-8</scri ...

Is it possible to determine the success or failure of an asynchronous function when the function itself already handles errors?

The architecture of my app is currently set up with functions that are scoped to specific modules, such as "Auth" for instance: async function authenticate(email) { let authenticated = false; try { if (email) { if (!validEmail(email) ...

Transferring array data between two distinct click actions

Is there a way to transfer values between click events in jQuery? For example, on the first click event I want to add or remove values from an array based on whether a checkbox is checked. Then, on the second click I would like to iterate through all the ...

Applying ng-class to the active button

I'm trying to enhance the CSS styling for a selected button in my ServiceNow widget. I've done some research online and managed to grasp the basic structure, but I'm still unsure about properly identifying a selected button and applying the ...