How can I have access to On Row Cancel event of Editable Table?

I need to hide Table Header when click cancel on the first row, anyone can help me? 


Miguel Vicente 
Hi Miguel,

You can add some javascript like 
in an unescaped expression.

Tiago Simões

Hi Tiago,

I've tried this code, and it isn't working.

Does not even print on the console "enter cancel function".

Any idea why?

SyntaxEditor Code Snippet

        console.log('enter cancel function');
        $('#" + CancelButton.Id+ "').click();

Hi Margarida,

If it doesnt even write in the log, i can only see one of two reasons:

1- The javascript has an error, wich you can check on browser developer tools;

2- The javascript is not being executed at all, probably because its not being loaded correctly. 

Where are you putting the javascript code? Is it inside a Ready() function?

Best regards,

Bruno Guedes

Hello everyone,

What about adding an event handler to the onClick of the editable table and then calling a function that adds and event handler to the onClick of the CancelRowAction button?

Something like this (using jQuery to improve readability):

function actoncancel() {
  <!-- your code here -->
function captureclick() {
  $(".CancelRowAction").on("click", actoncancel)
$(".EditableTable").on("click", captureclick);

Hi João,

Your solution works!

Thank you :)

Actually, it's not perfect yet.

If you press a checkbox inside the editable table it does not work.

I'll try to fix it.

Try this Margarida:

function actoncancel() {
  <!-- your code here -->
function captureclick() {
  $(".CancelRowAction").off("click", actoncancel);
  $(".CancelRowAction").one("click", actoncancel);
$(".EditableTable").on("click", captureclick);

I think the problem with the previous snippet was that it just kept adding event listeners every time you clicked the Editable Table.

I tested it on a simple Editable Table with checkboxes and it seems to work.
Hopefully it also helps out with your use case.