Ag-grid and custom popup

Help Requests
1

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: https://github.com/kirkovg/ag-grid-input-widget

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:

https://gist.dumber.app/?gist=b7cb423eebb2c9748cd5bff0c957c2ac

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

1 Like
2

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?
image

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 https://gist.dumber.app/?gist=6c41513f56de50c6c6f5d598290a470d

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

1 Like
3

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:

https://gist.dumber.app/?gist=63a74aaec6cb4e9cbe96a2edc89fa01c

2 Likes