Vue-good-table: Issue combining @on-row-click and checkbox table

[LiamMcArthur]

Issue Type (delete the irrelevant ones)

• [] Bug
• [x] Enhancement Request
• [x] Question

Specs

What version are you using?
2.21.0

What browser?
Google Chrome 84.0.4147.125

Expected Behavior

What did you expect to happen?
I want to use the checkbox table with selectOnCheckboxOnly set to true so that I can manually check rows, but I always want to use @on-row-click so that I can link the user to the entity. The checkboxes will be used to mark multiple rows for deletion.

Actual Behavior

What actually happened?
When checking the row, it fires the @on-row-click event. I've tried using @on-row-click.prevent but unfortunately that doesn't work.

[p0psicles]

Can't you just keep track of the selected rows?

[xaksis]

hey @LiamMcArthur, on-row-click also contains the entire click event within the params that is passed to the handler. You can use this event to check if the event was generated by the checkbox column. Here's what you'd need - rowClickHandler below uses the method isCheckBoxEvent to check if the event was generated by the checkbox column.

rowClickHandler(params) {
      if (this.isCheckboxEvent(params.event)) {
        console.log('is from checkbox.');
      } else {
        console.log('not from checkbox');
      }
},
isCheckboxEvent(event) {
      if (!event.path || !event.path.length) return false;
      for (let i = 0; i < event.path.length; i += 1) {
        const dom = event.path[i];
        if (dom && dom.classList && dom.classList.contains('vgt-checkbox-col')) return true;
      }
      return false;
},

Closing.

[LiamMcArthur]

@xaksis this is awesome, thank you!