Checkbox renderer - results from row and prop

Tags: #<Tag:0x00007efc6ad5cfb0> #<Tag:0x00007efc6ad5ce48>
#1

Hi, I was doing some troubleshooting with my checkboxes on my handson table.
I discovered that when I checked either row (I’ve got 2 rows I’m working with) it returned row [0] for both rows. The prop returned the correct result.

I would have thought the first row would return [0], and the second [2].

Is this correct?

#2

Hi @merlin2049er

Could you share the code that you use?

#4

I uploaded my code on pastbin, here it is…

Thanks,
JG

#5

Thank you for sharing the demo @merlin2049er

Could you please fill this demo https://jsfiddle.net/handsoncode/47txLybn/ with the logic for columns?

ps. I’ve edited it out from your post as it had the licenseKey attached.

#6

ok I added the data set, it’s two rows mostly checkboxes that need to be sent back to the server to update a table.

not sure why it didn’t render correctly.

#7

So as I assume it works well not, right?

#8

what I need to figure out is how to make an ajax call to the rails backend and translate the checkboxes into values I can edit in the table with.

#9

ok, I do have the data on the backend on the rails server.
But, it’s sending the entire table array, instead of just the value of the checkbox that has been checked.

function checkboxRenderer(instance, td, row, col, prop, value, cellProperties) {
// Create a checkbox input element
const checkbox = document.createElement(‘input’);
checkbox.type = ‘checkbox’;
checkbox.checked = value;

// Handle the checkbox click event
checkbox.addEventListener(‘click’, (event) => {
data[row][prop] = event.target.checked; // Update the data source
// sendUpdateToBackend(data); // Send the updated data to the backend
});

// Append the checkbox to the table cell
td.appendChild(checkbox);
td.style.textAlign = ‘center’; // Center-align the checkbox
sendUpdateToBackend(data); // Send the updated data to the backend

Handsontable.renderers.CheckboxRenderer.apply(this, arguments); // Call the built-in checkbox renderer

}

function sendUpdateToBackend(updatedData) {

// in this part you should put the function inside the controler
fetch('/projects/assign_roles2_update', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ data: updatedData }),
})
  .then(response => {
    if (response.ok) {
      // Handle success
    } else {
      // Handle errors
    }
  })
  .catch(error => {
    // Handle network errors
  });

}

#10

I did not see that detail in previous posts, Could you specify what you’d like to send

  • coordinates of the checked/unchecked checkbox
  • any meta data of it or an attached ID

ps. the cell renderer in your example is a regular renderer that add a checkbox HTML element and makes it checked. I do not recommend doing that. If you are not adding anything to the cell (other than checkbox itself) you’d rather use the type: 'checkbox' and setDataAtCell(row_index, column_index, true) to set up a checkbox to checked state on demand. That’s what currently supported.

Generally, I see that you have some good ideas, so maybe we can organize a 15-min call and discuss your project requirements? I’d like to help you utilize the API that we have to meet your goals.

#11

Hi Aleksandra, ok how do I contact you?

#12

Please share your availability on support@handsontable.com

#13