Cell Renderer and Event Listener

Tags: #<Tag:0x00007efc64b4b380> #<Tag:0x00007efc64b4b1a0>
#1

What i’m trying to do:

  • i’m adding an add-button in each cell in a table. The cell will have the text value and next to it, will be the add button. I was able to render is correctly and with some css it is looking great.
  • When the user click on the add button a function will be called that will perform an action. i am trying to do that using an event listener.
    Here is the UI:
    image

Issue: The event listener i added to the button is not triggering the function.

Here is my implementation:

image
image.png997×520 31.8 KB

image
image.png786×106 5.81 KB

Any idea why this does not trigger the function?

#2

Hi @aaron.dasani

We have a specific API hook that allows you to bind logic to a chosen element - onAfterCellMouseDown. Then you can specify the element and coordinates (column/row). I have an example in Angular and TypeScript that shows such implementation. As a target here I have button element:

https://jsfiddle.net/handsoncode/eL0xdc7v/

#3

That is another way to do it and probably the smartest. I tried it and it is working. TY

But i’m still curious why my implementation did not work. even though it should. Am i missing anything here?

Also, im getting this issue where the table scroll up a little bit sometime when i add a new row using that button. it can be confusing to the user. What can cause this Adrian?

#4

I tried it in a different various scenarios, and to be honest, I’m not entirely sure why it doesn’t work this way.

I tested it in a most basic environment, in plain JS and it works correctly: https://jsfiddle.net/handsoncode/0oh7qp63/

#5

That’s a weird one. Nevertheless, Thank you Adrian. The Solution u gave me work perfectly.
How about the issue i am getting with the table scrolling up a little bit when adding a new row. You have any idea what might cause that?

A wild guess i’m thinking is, it has to do with the html element being focus is not present or is different…

#6

Hi @aaron.dasani

Sorry, I missed that question. Can you tell me if that issue is present in this example when you add a new row? https://jsfiddle.net/handsoncode/e7hvsyk8/

#7

You are good Adrian. Seem like the issue might be on my end.
Thank you for the help Adrian

#8

Thank you for the update. I’m glad that everything is now working as you expected. I will close this topic now.

#9