Disable edit mode when clicking on first cell - Editable Table

Back to Forums

Miguel Marçal

Question

JavaScript

OutSystems Widgets

Usability

Hi fellows,

I have an editable table with many cells. My first cell has some buttons with other functionalities (3 icons with links and one checkbox). When I click the links, since they are set to Navigate, the table does not enter in editing mode, but when I click the checkbox to check or uncheck, the table enters in editing mode and leaves after the refresh.

What I wanted to achieve is to remove the need to enter in editMode when clicking on the first cell/checkbox. I thought that, since we don't enter edit mode when clicking a link, I could create a "dummy" link, but I noticed that we can't put checkbox on link.

I've been thinking some solutions I could use:

Via Javascript to prevent the first cell in entering Edit Mode (tried but could not achieve it)
Create a table (not editable) with only one cell, remove the first cell from the editable table, and then put together the two tables (to look like one table only)

I know I can probably accomplish what I need with step 2. But I feel like step 1 is a lot easier and better, since with step 2, I would need to compare the two tables to "connect" the rows from one table to another.

Thanks for the help! :-)
Miguel

13 Nov 2018

Aurelio Junior

Hi Miguel,

You can prevent the Editable Table from entering edit mode when clicking the checkbox by adding this to the checkbox's Extended Properties:

What this does is prevent the propagation of the click event up to the HTML "table" element, which has the onclick handler that manages the Editable Table's mode.

14 Nov 2018

1 reply

16 Nov 2018

Show thread

Hide thread

Miguel Marçal

Aurelio Junior wrote:

Hi Miguel,

You can prevent the Editable Table from entering edit mode when clicking the checkbox by adding this to the checkbox's Extended Properties:

What this does is prevent the propagation of the click event up to the HTML "table" element, which has the onclick handler that manages the Editable Table's mode.

Hi Aurelio,

Thank you very much for your reply!

I tried your suggestion but the checkbox just disappears. I mean, the checkbox is still there, but isn't displayed. I tried putting the onclick on the checkbox's Extended Properties, on it's container Extended Properties, on the cell Extended Properties and even with RunJavaScript on the Notify action that the checkbox calls, but the same thing occurs.

* Pic related - Checkbox vanishes.

Thank you once again,

Miguel Marçal

16 Nov 2018

Aurelio Junior

Hi Miguel, sorry for the late reply.

Ok, that's puzzling. Did that start happening after you added the "event.stopPropagation" script? Do you have any other Javascript that could me manipulating the visibility of the checkbox?

20 Nov 2018

2 replies

Last reply 20 Nov 2018

Show thread

Hide thread

Miguel Marçal

Aurelio Junior wrote:

Hi Miguel, sorry for the late reply.

Ok, that's puzzling. Did that start happening after you added the "event.stopPropagation" script? Do you have any other Javascript that could me manipulating the visibility of the checkbox?

Hi Aurelio, no worries! :)

Yes, it only happens if I add the "event.stopPropagation" script.

You were right! I have a Script for an InfiniteScroll in a webblock in the table, that's messing with the checkbox. Can't really tell why.

This is the script for the scroll:

SyntaxEditor Code Snippet

function OSInfiniteListInit(buttonId, LoadMoreId, LoadingMoreId) {
    $(window).scroll(function() {
           if($(window).scrollTop() + $(window).height() > $(document).height() - ($(window).height() * 0.30)) {
               $(window).unbind('scroll');
               var button = $('#' + buttonId);
               var LoadMore = $('#' + LoadMoreId);
               var LoadingMore = $('#' + LoadingMoreId);
               
               $(LoadMore).toggle();
               $(LoadingMore).toggle();               
               button.click();               
           }
    });
}

Still, I need the infiniteScroll so I can't just remove it. Is there any work around or do I need to remake the infinite scroll script?

20 Nov 2018

Miguel Marçal

Miguel Marçal wrote:

Aurelio Junior wrote:

Hi Miguel, sorry for the late reply.

Ok, that's puzzling. Did that start happening after you added the "event.stopPropagation" script? Do you have any other Javascript that could me manipulating the visibility of the checkbox?

Hi Aurelio, no worries! :)

Yes, it only happens if I add the "event.stopPropagation" script.

You were right! I have a Script for an InfiniteScroll in a webblock in the table, that's messing with the checkbox. Can't really tell why.

This is the script for the scroll:

SyntaxEditor Code Snippet

function OSInfiniteListInit(buttonId, LoadMoreId, LoadingMoreId) {
    $(window).scroll(function() {
           if($(window).scrollTop() + $(window).height() > $(document).height() - ($(window).height() * 0.30)) {
               $(window).unbind('scroll');
               var button = $('#' + buttonId);
               var LoadMore = $('#' + LoadMoreId);
               var LoadingMore = $('#' + LoadingMoreId);
               
               $(LoadMore).toggle();
               $(LoadingMore).toggle();               
               button.click();               
           }
    });
}

Still, I need the infiniteScroll so I can't just remove it. Is there any work around or do I need to remake the infinite scroll script?

Well...I had removed the InfiniteScroll to test if you were right, about other scripts that could be affecting the behavior of the checkbox and yes you were right! But some strange thing happened! I reinserted the InfiniteScroll and removed the event.stopPropagation script and now it works!

Strange but at least it works, can't really explain it though. Appreciated for all your help Aurelio!

Cheers,

Miguel Marçal

20 Nov 2018

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines