Get rows with checkbox in rowHeader

Tags: #<Tag:0x00007efc72f808c0> #<Tag:0x00007efc72f80780>
#1

Hello,

I have a case similar to the demo example (checkbox in rowHeader) :

image
image.png1153×476 43.9 KB

In an Angular project I want to add a button to get only rows who are checked in the rowheader.
(example in my screen : get only the 3 rows checked)

How can i do that ?

Thank you,
Hugo

#2

Hi @Hugo

Thank you for contacting us. We don’t have an API to check that, as it’s a custom implementation, but it should be possible to do with just checking the state of the input element inside the row header. Can you specify what do you mean by getting those rows? Getting their indexes, or the data?

#3

How can i access the input element inside the row header ?
I try : getDataAtCol(-1) but only null is return.

Can you specify what do you mean by getting those rows? Getting their indexes, or the data?

Ideally data, but i can work with indexes

How we get RowHeader as TH element
#4

I tried this and i can get what i wanted :
code based on the demo, file : src/data-grid/utils/hooks-callbacks.ts

export const changeCheckboxCell: ChangeCheckboxCell = function changeCheckboxCell(
  event,
  coords
) {
  const target = event.target as HTMLInputElement;

  if (coords.col === -1 && event.target && target.nodeName === "INPUT") {
    event.preventDefault(); // Handsontable will render checked/unchecked checkbox by it own.

    // HERE : we can intercepte which row just be selected/unselected
    console.debug(this.getDataAtRow(coords.row));

    this.setDataAtRowProp(coords.row, "0", !target.checked);
  }
};

With a little rework I will be able to store data on a service.

I’m open to a better solution if you have one; otherwise, we can close the topic.

#5

Hi @Hugo

That’s what I wanted to propose, as logic for checking the input element is already there. I think it’s a good solution for this requirement.

1 Like
#6