116
Views
9
Comments
How to check checkbox within Table Records on click on the entire row
Question

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;
"
Rank: #32200

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?

Rank: #32200

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

Rank: #329

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

});

 

Rank: #136

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

mvp_badge
MVP
Rank: #91

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

CheckboxTask.oml

Hello Adam,

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

Regards,

Sanjay