Highlight selected row immediately

Tags: #<Tag:0x00007f8b1ada10b8> #<Tag:0x00007f8b1ada0f00>
#1

Hello, I am trying to store last selected row index in local storage. As we have tabs, users navigate between them, they are separate components. In one of them we use handsontable. What we want to achieve is to make a grid highlight row using saved value from localstorage.

  const highlightSelectedJobRow = (row, column) => {
  for (var i = 0; i < hotTableComponent.current.hotInstance.countCols(); i++) {
      hotTableComponent.current.hotInstance.setCellMeta(row, i, 'className', 'currentRow');
  }
  localStorage.setItem('lastHighlitedRow', row);
  hotTableComponent.current.hotInstance.render();

}

const getHighlightedRow = () => {
if (localStorage.hasOwnProperty("lastHighlitedRow")) {
  let lastHighlitedRow = localStorage.getItem('lastHighlitedRow');
  for (var i = 0; i < hotTableComponent.current.hotInstance.countCols(); i++) {
    hotTableComponent.current.hotInstance.setCellMeta(lastHighlitedRow, i, 'className', 'currentRow');
  }

  hotTableComponent.current.hotInstance.render();
}

getHighlightedRow method is called in UseEffect hook(React)
Code works. For some reason I have to click somewhere on grid then last selected row will be highlighted. I need to elaminate this behavior.

#2

Hi @dtemirkhanov

Thank you for contacting us. I tried to replicate the issue using your code but I think there are some missing parts. Can you please modify this example to show us the issue?

https://jsfiddle.net/aszymanski/tknxLe7m/

#3

Thank you, I found a problem when tried to simulate it in js fiddle.

#4

That’s great to hear, can you please share what was the issue here for other users that might run into the same problem?

#5

In order to render a grid, data and settings needed, pulling them from database requires time, issue was that I tried to use setCellMeta while pulling them.

#6

Hi @dtemirkhanov

Thank you very much. I will close this topic now.

#7