How to check checkbox within Table Records on click on the entire row

Hey,


I just want to do a simple thing. 

I do have a Table Records with three cols. One of them contains checkbox.

What I need to achieve is to have onclick on the any place in the row. After click on the row, I need the checkbox checked value to change to 'true' and do the action. 


What is important, within the action I need to filter my list from a Preparation. The filter is by the checkbox, if it is checked or not. I need to get only checked rows. 

This works perfectly, if I click on the checkbox directly. 


What I tried to do? 

My solution that I tried, was to add link to other table cells, with destination to the same action as the checkbox. In the action, just before sort I added JS script (at the end). 

However, the filter doesn't get that the checkbox is checked and filters without it. 

Does anybody knows why it happes and what will be the solution in this situation? 


Besides, I wonder how to pass 'this' to my JS script. If you could help my with that also I would appreciate it. 


Just to mention, I'm using traditional web. 

"
    const checkboxes = document.querySelectorAll('table.TableRecords tbody tr input');
    const rowNumber = " + EncodeJavaScript(RowNumber) + ";

    const checkbox = checkboxes[rowNumber];
    checkbox.checked = true;
"

Additional question:

I changed the value of the checkbox using JS script. It changes. 

However, when I click directly on the checkbox and unckeck it, it unchecks but the action that it's bound to doesn't trigger. Why that happens?

Please, don't leave me with this :( 

Hi Adam,

I would like to help you. Can you please post your OML file if it doesn't contain any confidential data, or post some snaps of your table record with it property and also the property of checkbox and that container.


Regards,

Sanjay

Adam Ulala wrote:

Hey,


I just want to do a simple thing. 

I do have a Table Records with three cols. One of them contains checkbox.

What I need to achieve is to have onclick on the any place in the row. After click on the row, I need the checkbox checked value to change to 'true' and do the action. 


What is important, within the action I need to filter my list from a Preparation. The filter is by the checkbox, if it is checked or not. I need to get only checked rows. 

This works perfectly, if I click on the checkbox directly. 


What I tried to do? 

My solution that I tried, was to add link to other table cells, with destination to the same action as the checkbox. In the action, just before sort I added JS script (at the end). 

However, the filter doesn't get that the checkbox is checked and filters without it. 

Does anybody knows why it happes and what will be the solution in this situation? 


Besides, I wonder how to pass 'this' to my JS script. If you could help my with that also I would appreciate it. 


Just to mention, I'm using traditional web. 

"
    const checkboxes = document.querySelectorAll('table.TableRecords tbody tr input');
    const rowNumber = " + EncodeJavaScript(RowNumber) + ";

    const checkbox = checkboxes[rowNumber];
    checkbox.checked = true;
"

 Hi Adam,


Try the below script

document.querySelector("table").addEventListener("click", ({target}) => {

   if (target.nodeName === "INPUT") return;

    const tr = target.closest("tr");

  if (tr) {

     const checkbox = tr.querySelector("input[type='checkbox']");

    if (checkbox) {

        checkbox.checked = !checkbox.checked;

    }

  }


Hope this helps

Thanks

AD

});

 

Hi Adam,


My solution that I tried, was to add link to other table cells, with destination to the same action as the checkbox. In the action, just before sort I added JS script (at the end). 

However, the filter doesn't get that the checkbox is checked and filters without it. 

Does anybody knows why it happes and what will be the solution in this situation? 


 that sounds like what you should be doing, only, it shouldn't be the same action, it should be another action that switches the checkbox value (so far you just clicked the row, that doesn't do anything to the checkbox itself), and then call the same action as the checkbox onchange.


But I don't understand what you want to be doing with JS ? can you explain ?

Dorine

Adam Ulala wrote:

Additional question:

I changed the value of the checkbox using JS script. It changes. 

However, when I click directly on the checkbox and unckeck it, it unchecks but the action that it's bound to doesn't trigger. Why that happens?

 Hi Adam,

Please check the attached OML.click on any row it will check/uncheck the checkbox you can do this at client side just add onclick event on row function is defined in js .Please see in attached OML.

Hope this helps

Thanks

AD

 

Adam Ulala wrote:

Please, don't leave me with this :( 

Hi Adam,

I also came across the same task long back ago but because of it's technical complexity, I was not able to implement at that time but after seeing your post it challenged me once again, I invested a good amount of time and finally got it implemented ..... Hurray! :)

See the sample app 

Please let me know if this is what you are looking for, will share the solution .oml file shortly!


Regards,

Benjith Sam

Hi Adam,

Please find the .oml solution file - It Includes the implementation for your required objective.

See the sample app  


Hope this helps!


Regards,

Benjith Sam

Hello Adam,

Are you able implement it? Please let us know if you still have issue.

Regards,

Sanjay