How to create custom checkbox inside column with type: 'checkbox' and making it trigger 'afterChange' event too

Getting help Questions
1

We have a handsontable with one of its column of type checkbox and have also specified afterChange in htOptions. It works pretty fine and function supplied in afterChange option gets called every time user interacts with the checkbox.

Now, instead of basic checkbox that we get by default, I want to create a custom/fancy checkbox something like here with below markup.

<label class="custom-checkbox-container">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

How can I achieve that? I’m aware of custom renderer, but I also want my handsontable to:

  • continue triggering afterChange event
  • insert a new spare row when user checks the checkbox in the last row (since we have minSpareRows: 1)

Please help.

2

Hi,

Maybe you could use afterRenderer to get the reference to TD element and alter its children?

Kind regards,
Wojciech

3

@wojciech.czerniak, @aleksandra_budnik

Hi,

I am able to render the custom checkbox using either afterRenderer in htOptions or renderer in column definition. However, with this the main problem I am facing is that, handsontable stops firing the afterChange event whenever I interact with checkbox. Below is how I use it:

function afterRendererCallback(td, row, col, prop, value, cellProperties) {
          if (col === 1) {
            td.innerHTML =
              '<label class="custom-checkbox-container">' +
              '  <input type="checkbox">' +
              '  <span class="checkmark"></span>' +
              '</label>'
            return td;
          }
        }

With above piece of code, it also gives error in console upon checking/unchecking the checkbox:
Uncaught TypeError: Cannot create property ‘NaN’ on number ‘NaN’.

4

Hey @saharsh.jain

I’ve created a demo here https://jsfiddle.net/bsdyent4/ It will be much easier to share the progress. What are all the requirements here? Do I need to do any alterations?

5

Hi @aleksandra_budnik,

Thank you for the prompt response. I have updated the demo fiddle here. Now, when you select an option in the ‘type’ column it will:

  • invoke afterChange handler
  • insert spare row

However, the same doesn’t happen when you check/uncheck the custom checkbox in ‘value’ column.

6

I can see what’s the issue.

The value of the cell does not change as the checkbox is a part of the renderer. If you would use a build in chekcbox like here https://jsfiddle.net/fvc1ua72/ you would change false to true or true to false but in your example the data is still the same. You would need to pass a new value via setDataAtCell to trigger afterChange hook.

7

Hi @aleksandra_budnik

Yes I’m aware that it works on using default build for checkbox. But in my case I can’t seem to get where to employ call to setDataAtCell. Can you please update my fiddle to show usage of setDataAtCell.

Thanks.

8

I can recommend afterOnCellMouseDown hook. You’d need to call the setDataAtCell once you will check if the value has changed. In this case, you need to keep the checkbox value somewhere.

To know where and when to compare those values you need to define if you have a pattern for them (example: at the beginning, every value is false) or they can differ and change multiple times.