Event triggered before opening the cell editor in ag-Grid

I'm facing a scenario where I have a grid with rows. When a user double clicks on a cell, a cell editor opens up. There are events associated with the cellEditor - cellEditingStarted and cellEditingStopped, but I need an event that triggers just before the cell editor opens.

Basically, I want to perform some action when a user double clicks on a cell before the cell editor pops up. Is there a way to achieve this? I couldn't find anything in the documentation.

My goal is to have a custom cell editor appear from the grid, but when the grid is near the bottom of the screen, the cell editor is partially hidden. To work around this, I added a div under the grid that expands its height when a row is added. However, I'm struggling to get it to scroll properly when a cell is double clicked.

https://i.sstatic.net/PsfrU.png Thanks!

htmlcssangularag-gridtablecelleditor

Answer №1

To handle this scenario, you can utilize the agInit lifecycle method within the Custom Cell Editor. This method is triggered before cellEditingStarted is called:

export class MoodEditor implements ICellEditorAngularComp {

  agInit(params: any): void {
    console.log('agInit, implement logic here');
  }

// ...

You can confirm this by checking out the provided plunkr. Make sure to open the developer console to view the log messages.

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

Heroku: deployment unsuccessful

Currently, I am encountering a problem with Heroku: my build is failing without any explanation provided. Previously, I had no issues deploying. Even on my local machine, deployment was smooth. However, on my Heroku application, the build process halts a ...

angularherokunpm

Problem occurs when tab links vanish after clicking on another part of the website

Exploring the world of Javascript as a newcomer has been quite an adventure, but I've encountered a hurdle with tab links on my website. Everything seems to be working fine – the links cycle through and display the correct content. However, when it ...

javascripthtml

Angular 4 - Resolve ngModelChange Error: Property '...'is Undefined When Binding Two Select Form

I need assistance with implementing a functionality in Angular 4. I have a JSON model that contains information about books, including their titles and authors. I want to create two select form elements (dropdowns): the first dropdown should display the ti ...

angulardrop-down-menuundefinedangular-ngmodelchange

How can HTML output be automatically indented?

Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...

phphtmlindentation

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

csssencha-touch-2.3

What is the best way to individually update elements in an array in Ionic v5?

As a newcomer to Ionic and TypeScript, I would appreciate your kindness in helping me with a problem I am facing. I have an array of objects that get updated when adding an 'exercise', where you can specify the number of sets and reps. The issue ...

angulartypescriptionic-framework

Focused input filter in a tabular header style

I've been working on customizing the Tabulator header filter to have a more "flattened" style, as requested by my boss. In my CSS, I added the code ...input:focus{border:1px solid #1bb394} to change the input border to 1px green. While this change tak ...

csstabulator

Angular2 encountering an unidentified Auth2 Object during logout process

Greetings, I am currently experiencing an issue with signing out of an auth2 client. Previously, this process functioned correctly until I upgraded my router to comply with new RC requirements. Now, it seems that the auth2 object is being cleared or lost ...

authenticationangulartypescriptoauth

The process of dynamically inserting input types into a <td> element using the innerHTML tag is not functioning properly in Internet Explorer

I am facing an issue with dynamically placing input types within a <td> tag - the innerHTML() method is not functioning properly in Internet Explorer, although it works fine in Mozilla. This is how I am inserting the input types using JavaScript, wi ...

javascripthtmlinternet-explorer

Challenges with parsing JSON using jQuery

I am attempting to retrieve data from a page that returns JSON in order to store it in an array. The current code is functional, but I am encountering difficulties when trying to pass the variable (which should contain the content) into the jQuery.parseJSO ...

javascriptjqueryhtmljson

Tips for organizing labels and user input within an HTML document

I attempted to align inputs and labels horizontally. Here is what I tried: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="span2"> <h2& ...

htmlcsstwitter-bootstrap

What is the best way to implement i18n in an input field placeholder?

Currently, I am using inputs with placeholders in this manner: <input placeholder="Filter"> However, I need to adhere to the i18n method. Unfortunately, i18n-placeholder is prohibited in Angular 6. Can anyone suggest the correct approach to achiev ...

angularangular-i18n

What is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...

htmlcss

How to Retrieve an Array from a Promise Using Angular 4 and Typescript

I am encountering difficulties when trying to store data from a returned promise. To verify that the desired value has been returned, I log it in this manner: private fetchData() { this._movieFranchiseService.getHighestGrossingFilmFranchises() ...

angulartypescriptpromise

Extracting text from an HTML file and passing it to an Express.js server: A beginner

Currently, I'm attempting to retrieve the values from an HTML text field and store them in variables. I require HTML to capture these values and return the response within the .html file. HTML: <body> <form> ...

javascripthtmlnode.jsexpress

Assigning the output of a function to an Angular2 component (written in TypeScript)

I have a small utility that receives notifications from a web socket. Whenever the fillThemSomehow() method is called, it fetches and stores them in an array. @Injectable() export class WebsocketNotificationHandler { notifications: Array<Notificati ...

typescriptangular

Deactivate one select box depending on the value chosen in another select box

I am looking to disable one select box when the other select box equals 1, and vice versa. While I know how to achieve this with IDs, the challenge arises as the select boxes I want to target have dynamically generated IDs and names via PHP. Therefore, I n ...

javascriptjqueryhtml

Http' does not have the 'update' property

I recently implemented Angular 2 Release and utilized 'Http' from '@angular/http' for my project. However, I encountered an error when I invoked the method 'update', which resulted in the following message: "Evidently, th ...

angulartypescriptangular-httpangular2-http

The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...

htmlcssbootstrap-5

What is the best way to choose the final XHTML <span> tag with a specific class using XPath?

My target XHTML document structure is as follows: <html> <head> </head> <body> <span class="boris"> </span> <span class="boris"> </span> <span class="johnson"> </span> </body> </html> ...

htmlxmlxhtmlxpath