Ag-grid and custom popup

I am trying to make a custom popup for ag-grid, and I am having trouble with the applyValues() function.

It is based off this github link:

My problem is that if I do what they did, in applyValues(), I don’t have the params I need.

If I pass in this.params, I have the variables, but the popup won’t display.

Use case:

I am displaying address information all in one field, and then using a popup editor to edit all the fields and then apply them to the grid.

Here is my gist.dumber link:

On line 131 in addrpopup.js is the comment explaining my problem and showing the code that I have tried.

1 Like

I’m not sure how you are meant to display a popup, so I tried to make right click work. Is this what you want?

Regardless of that, the issue is with addrPopup, there’s a line that 136 that has something like this:

      addrPopup.prototype._applyValues =  () => {

Arrow function does not have this, so anything inside it is pointed to the nearest this, which is basically undefined.

Change it to:

      addrPopup.prototype._applyValues = function() {

Edit: also, at line 133, you have

//        this.applyButton.addEventListener('click', this._applyValues(this.params));

.addEventListener 2nd parameter should be a function, and in the commented code, it’s getting a result of a function call (this._applyValues(this.params)), which may or may not be a function.
Change it to:

        this.applyButton.addEventListener('click', () => this._applyValues(this.params));

Here’s another issue: we need to remove these listener when disposing an addrPopup instance. So you will need to do something like this:

function addrPopup() {
  this.applyBtnClickListener = () => this._applyValues(this.params);

this.applyButton.addEventListener('click', this.applyBtnClickListener);

so later when destroying the popup, you can do:

this.applyButton.removeEventListener('click', this.applyBtnClickListener);

and it should work. My updated example here

Thanks @huochunpeng for making it easy to share these gist :smile:

1 Like

Thank you, this got me started down the route of making sure it updated when I hit Apply.

And it works - here’s my gist.dumber for those who are curious: