HandsOnTable - destroy and re-create not working a

Question

I have code like below:

HTML

<div id="rangePricesGrid" class="handsontable" style="width: auto; overflow: auto"></div>

Javascript:

              var rangePriceGrid = $('#rangePricesGrid').handsontable('getInstance');
                if (rangePriceGrid != undefined) {
                    rangePriceGrid.destroy();
                    if (setRangeGridOptions != undefined)
                        rangePriceGrid = $('#rangePricesGrid').handsontable(setRangeGridOptions);


                } else {
                    if (setRangeGridOptions != undefined)
                        rangePriceGrid = $('#rangePricesGrid').handsontable(setRangeGridOptions);
                }

On page load, it works fine and paints the HOT. But then when I update one of the properties (say Data, and number of columns also) of HOT and then calls above method, it fails at the below

rangePriceGrid = $('#rangePricesGrid').handsontable(setRangeGridOptions);

with error

Uncaught Error: This method cannot be called because this Handsontable instance has been destroyed

What am I doing wrong here ? I know the HOT table is destoryed, but I am trying to re-created it with updated options.

Please suggest

Answer 1

I think you understand that you're destroying the instance but you don't understand how to recreate the instance. To start it would be useful to see setRangeGridOptions and maybe also a jsfiddle. If you're instantiating handsontable using the jQuerySelector.handsontable(options) method, it may be the cause of your problems.

Have you considered manually erasing the reference to the previous HOT instance so you don't have this problem? Try instantiating HOT this way:

var hot = new Handsontable($('#rangePricesGrid')[0], setRangeGridOptions)

This way, you should be able to destroy the hot instance and your code should start working. To destroy the hot instance you would simply do:

hot.destroy()

And to recreate it, you reuse the line above.

Answer 2

You can do like this.

// incorrect

var rangePriceGrid = $('#rangePricesGrid').handsontable('getInstance');

rangePriceGrid.destroy();


// correct

$('#rangePricesGrid').destroy();