Referencing the Handsontable instance hot in hot

[Even-Lau]

Description

Hello,

I'm using "@handsontable/vue": "^4.0.0".
In the Handsontable cell editor, I need to call afterScrollVertically function to load more data from the server.
Meanwhile, I need to reference the Handsontable as a cell editor in Handsontable or reference the Vue instance.

Is there any way to do that?

Steps to reproduce

<div id="example1" class="hot">
  <hot-table ref="hotTableComponent" :settings="hotSettings"></hot-table>
</div>

  import Vue from 'vue';
  import { HotTable } from '@handsontable/vue';
  import Handsontable from 'handsontable';
  let i=0
  new Vue({
    el: '#example1',
    data: function() {
      return {
        hotSettings: {
        	licenseKey: 'non-commercial-and-evaluation',
          data: Handsontable.helper.createSpreadsheetData(4, 4),
          colHeaders: true,
          columns: [
          {
            data: 'serial_number',
            type: 'handsontable',
            handsontable: {
              colHeaders: ['serial_number','name'],
              autoColumnSize: true,
              width: 600,
              height: 220,
              // rowHeights: 33,
              data: [
              	{serial_number:'123',name:'Tommy'},
                {serial_number:'456',name:'Tom'},
                {serial_number:'78',name:'Jane'},
                {serial_number:'786',name:'Roy'},
                {serial_number:'4537',name:'Jhone'},
                {serial_number:'453678',name:'Tiffany'},
                {serial_number:'768',name:'Paggy'},
                {serial_number:'786',name:'Stormy'},
                {serial_number:'115323',name:'Alice'},
                {serial_number:'124563',name:'Sophie'}
              ],
              getValue: function() {
                const selection = this.getSelectedLast()
                console.log(this.getSourceDataAtRow(selection[0]))
                return this.getSourceDataAtRow(selection[0]).serial_number
              },             
              // 1、CAN NOT reference vue instance
              afterScrollVertically: function() {
                this.selectCell(i, 0)
                i++
                 if (this.getSelected()[0][0] === 9) {
                 	// CAN NOT reference vue instance
                  this.getData()
                  this.updateSettings({
                  	// CAN NOT reference vue instance
                    data: this.newData
                  })
                }
              },
              // 2、CAN NOT reference handsontable instance
              afterScrollVertically2: () => {
                // CAN NOT reference handsontable instance
                this.selectCell(i, 0)
                i++
                // CAN NOT reference handsontable instance
                if (this.getSelected()[0][0] === 9) {
                  this.getData()
                  this.updateSettings({
                    data: newData
                  })
                }
              }
            }
          }
        ],
        },
        newData: [{serial_number:'new',name:'data'}]
      }
    },
    created() {
    	this.getData()
  	},
    methods: {
      getData() {
        // Some Ajax request 
        // this.newData = response
        console.log('GET NEW DATA!')
      }
    },
    components: {
      HotTable
    }
  });

Demo

https://jsfiddle.net/Even6868/51tskngp/65/

Your environment

• Vue wrapper version:
• Handsontable version: @handsontable/vue": "^4.0.0
• Browser Name and version:
• Operating System:

[AMBudnik]

Hey @Even-Lau

here's an example https://codepen.io/anon/pen/QVKBLZ?editors=1010 that refers to the instance - in your case, it is this.$refs.hotTableComponent.table

[Even-Lau]

Hi, @AMBudnik

I mean I want to reference the handsontable that triggered by the Handsontable cell editor or reference the vue instance in the afterScrollVertically of it. Not the handsontable that shows up when the page initialize.

[Even-Lau]

My problem not solved yet, tag it unsolved, please! @AMBudnik

[Even-Lau]

Hi,@AMBudnik
My problem not solved yet. Looking forward to your reply

[AMBudnik]

Hi @Even-Lau
if you have some urgent cases please send the messages directly to support@handsontable.com

As far as I understand it right we need to save vue instance first and then we can use it within the app.
In this case, we need to use vueInstance to get access to Vue instance.

The afterScrollVertically2 doesn't exist in handsontable, that it's why we CAN NOT reference the handsontable instance.

https://jsfiddle.net/eco1fv95/

[Even-Lau]

Thanks a lot.

[SkyGrass]

Thanks a lot
hi , i have same problem . do you solve it ?

[SkyGrass]

getActiveEditor().htEditor may be usefull