How to keep multi-selections highlighted

Tags: #<Tag:0x00007efc6dee9330>
#1

I need to be able to keep multiple highlighted selections in state. I have 1 button that will toggle a selection off.
So after a user selects columns it will stay highlighted and the button will toggle ON. They can go on and make other selections and when they click back on a previous selection the toggle button will be able to toggle it OFF.

So I need to know how to hook into the selections. What is the easiest way of doing this?

Thank you.

#2

HI @texas697

Have you tried adding outsideClickDeselects: false to the settings?
docs https://handsontable.com/docs/7.4.2/Options.html#outsideClickDeselects

#3

thanks for the reply. Actually the specs where much easier than I read them to be. I need to update the background color. I should be able to use a custom renderer for that. But I do have a question about afterOnCellMouseDown. I am trying to use that to get the cell coordinates when user clicks back on the colored cells. It does give me the data I need. However it repeatedly fires off which makes the browser blow up if I try to do any logic. How can this be controlled? Or is there another hook I need to use? Do I have to use some type of throttle? Different hook? I just need the coords of the cell I click on

afterRenderer={() => {
      window.hotInstance = this.hotTableComponent.current.hotInstance;
      this.hotTableComponent.current.hotInstance.addHook('afterOnCellMouseDown', (e, coords) => {
        this.afterOnCellMouseDown(e, coords);
      });
    }}

 afterOnCellMouseDown = (e, coords) => {
const state = [];
this.props.selectedCells.forEach(x => { state.push(x[0]); });
if (state.length > 0) {
  // window.hotInstance.selectCells(state);
  // eslint-disable-next-line array-callback-return
  state.find(x => {
    const col = x.includes(coords.col);
    const row = x.includes(coords.row);
    if (col && row) {
      this.props.setBtnText('Un-Shutin');
      this.props.setCellsToBeRemoved(x);
    } else {
      this.props.setBtnText('Shutin');
      this.props.setCellsToBeRemoved([]);
    }
  });
  }
};
#4

Morning @texas697!

The hook should fire only when a cell is clicked. You can also use the afterSelectionEnd - (it returns cell coords).

If you’d like to change background of a selected cell you can use CSS. Example https://jsfiddle.net/AMBudnik/dLb86792/ Is that the expected result?

#5