Accessing reference after grid loads

Getting help Questions
1

I’m trying to achieve this:

  • Once grid is loaded, scroll to the position it was at prior.

The problem im having is accessing my HotTable reference ( im using react ), after the grid is rendered.

I’m using the afterRender event, and my reference to my HotTable is this.hotTableRef.hotInstance

Problem is that using afterRender(), then my instance is null. im confused as to why that would be.

As far as i understand, once render is complete them the HotTable component is available. Maybe afterRender is not the right method for this ?

My HotTable declaration:

<HotTable
                afterChange={this.changeCell}
                afterRender={() => this.test()}
                colHeaders={true}
                rowHeaders={true}
                columns={columnInfos}
                contextMenu={false}
                currentColClassName={'currentCol'}
                currentRowClassName={'currentRow'}
                data={this.state.data}
                fixedColumnsLeft={1}
                fixedRowsTop={0}
                formulas={false}
                licenseKey='xxx'
                nestedHeaders={columnTitles}
                observeChanges={true}
                persistentState={true}
                ref={this.setHotTableRef}
                root='hot'
                viewportColumnRenderingOffset={20}
                viewportRowRenderingOffset={100}
            />
        </div>

and then my test function:

    test = () => {
      //this.hotTableRef.hotInstance.selectCell(20, 20, 20, 20, true)
     }
2

I just noticed that the problem might be related to how soon after ‘render’ the reference is set.

so ref={this.setHotTableRef} seems to happen after afterRender={() => this.test()}, so when i try to access my reference to the HotTable within my test function, it is null.

3

Hi @ssense_dev

do anything changes when you add a slight delay (~20ms)?

4

So i figured how to access the ref to my table after loading.

Now the problem i have is getting the index value of my column. To build the grid, the json object we have looks something like this:

image.png880×404 122 KB

So, our columns are basically referenced like ‘apr0’, ‘feb0’, etc. Then when i try either scrollViewportTo, or selectCell, neither of them scroll vertically to my column. I tested and noticed that the scroll works if i set the column manually to an integer.

My question is, how can i convert ‘apr0’ to its equivalent actual column number? I tried both toPhysicalColumn and toVisualColumn and both simply return me the same string i pass.

I was hoping then that hotInstance.toVisualColumn(‘apr0’) would return 5 for example.

How can i achieve this ?

5

Well i en ended up getting the index # via Object.keys.

Object.keys(this.state.data[row]).indexOf(col[0]);

Now, a new problem I have.

If I use scrollViewportTo, it scrolls to the expected position, but it doesnt select my cell. And if i use selectCell instead, it scrolls and selects the cell, BUT it doesnt have the snaptocell property that scrollViewportTo uses. So at the moment, im forced to do this:

this.hotTableRef.hotInstance.selectCell(this.row, this.column, this.row, this.column, true, false);
this.hotTableRef.hotInstance.scrollViewportTo(this.row, this.column, false, true);

Any suggestions ?

6

Have you tried to add selectCell in the afterScrollHorizontally hook?

7

No, but that would add an extra step wouldnt it ?

I still have to scroll horizontally to the right position, then this event would fire, and inside of it i would put selectCell. Correct me if im wrong.

A side question if i may: How can i set the focus back on the grid ? I’m able now to select the cell in question and scroll to it, but the grid is not focused, so the user has to actually use the mouse to get focus again. I tried searching for Handsontable events for this but couldnt find any,

8

We usually use the selectCell() to add a focus to the table. And when it comes to this method this solution Handsontable example - JSFiddle - Code Playground doesn’t meet your requirements? Sorry if I’m missing something.

9

For some reason my grid doesnt get focus. Using the example of code I sent, selectCell is in indeed highlighting the cell, but if I try to type right away, the cell doesnt have the actual focus. I’m forced to click with the mouse on it.

I’ll create a video and upload it.

My app is a bit complex for me to create a working demo.

Thanks

10

It looks like something can steal the keydown event. You can check if anything in your app uses the keydown event? Also please let me know if you’re using the latest version of Handsontable PRO or older.

11

I think that we can close the issue as there is no reply for more than 2 weeks