Search code examples
javascriptvue.jshandsontable

Link js method to custom row properties on Handsontable row header - VueJS

Hi I have a little problem with Handsontable, I added a trash icon in the row headers, that calls an API endpoint to delete to object described on that row.

The thing is, I don't manage to link the span with a js method. I tried multiple solutions :

  1. writing the js function directly in the component.
  2. <span onclick="myMethod(args)"></span
  3. Setting document.getElementById(...).onclick = () => {...}
  4. Setting idem.addEventListener('click', () => {...})
  5. Setting idem.click(() => {...})

But there is still no actions performed. I am using Linear Icons. The icon is showing up when the mouse passes over the row header, and the call should happen when I click on that icon.

hotSettings: {
  rowHeaders(visualRowIndex) {
    return `<div><p>${visualRowIndex + 1}</p><span id="delete-item" class="lnr lnr-trash icon"></span></div>`;
  }
}

I set the event listeners after the HotTable component have been initialized, using :after-init="handleAfterInit". Is there any other possibilities I can try, or something I missed ?

For your infomration, the code above with the hotSettings is in a mixin .js file, that is added into my Vue component.

Thanks

Solution

  • Seemed not possible, the event was never triggered. I ended up creating a new column for that delete button.