Custom Remove Not Working

Tags: #<Tag:0x00007efc6140ff10> #<Tag:0x00007efc6140fdd0>
#1

https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css

I’ve replicated this in fiddle and it is working for the simple example. In my Django Application I have the same code and I’m getting an exception in onCellMouseUp after updateSettings() returns.
Also, the column is removed and moved to the end with standard excel like lettering “AF.”

Here is the fiddle:
https://jsfiddle.net/ukfqas75/

Here is my function:
function removeColumn(idx) {
default_columns.splice(idx, 1);
display_headers.splice(idx, 1);
for (d of data) {
d.splice(idx, 1);
}
hot.updateSettings({
columns: default_columns,
colHeaders: display_headers,
data: data} );
log(“Made it”);
}
I get “Made it” in the console, then I get this error:
Uncaught Error: The “runHooks” method cannot be called because this Handsontable instance has been destroyed
at t.default.runHooks (handsontable.full.min.js:34:416871)
at Object.onCellMouseUp (handsontable.full.min.js:40:61662)
at e.value (handsontable.full.min.js:34:514976)
at e.value (handsontable.full.min.js:34:493735)
at e.value (handsontable.full.min.js:34:498328)
at HTMLDivElement. (handsontable.full.min.js:34:495661)
at HTMLDivElement.a (handsontable.full.min.js:34:35964)
(anonymous) @ handsontable.full.min.js:34
onCellMouseUp @ handsontable.full.min.js:40
value @ handsontable.full.min.js:34
value @ handsontable.full.min.js:34
value @ handsontable.full.min.js:34
(anonymous) @ handsontable.full.min.js:34
a @ handsontable.full.min.js:34

HOT logs the full hot object, but I can’t copy it. Any suggestions?
Thanks,
Bob

#2

Hi @bg.newland

The general logic for your custom removal function looks correct. Do you have any other logic that is responsible for displaying/destroying the table? As, basing on the error you get, it looks like the table is getting destroyed at some point

It will be hard to determine what might be the exact issue if we won’t be able to reproduce the problem.

#3

I added the insert/remove and it is working in fiddle…
https://jsfiddle.net/ukfqas75/4/

Same code in my project still gives this error.

#4

Hi @bg.newland

This code also looks fine, and as you stated, it works correctly. Is there any additional library you use that might interfere with Handsontable?

I can also suggest to try to minify the configuration to the point where the issue is no longer present to find part of the logic responsible for this error.

#5

I commented out all settings and hooks except for data and colHeaders and nothing changed. Am I missing a setting perhaps?

var settings = {
data:data,
colHeaders: display_headers,
contextMenu: true,
columns: default_columns,
hiddenColumns: {
    indicators: true,
    copyPasteEnabled: true,
    columns: [3,4,5,7,8,9]
},
dropdownMenu: {
    items: {
        'custom_insert': { // type anything that is not already predefined by Handsontable
            name: 'Insert Column', // add your custom label
            callback: function(key, options) { //this is the part where you attach your custom code
                let col = options[0].start.col + 1;
                if (col < 10) {
                    alert("New columns must be inserted after options.");
                    return;
                }
                insertCurCol = col; // insert to the right
                log(insertCurCol);
                openForm();
            }
        },
        'custom_remove': { // type anything that is not already predefined by Handsontable
            name: 'Remove Column', // add your custom label
            callback: function(key, options) { //this is the part where you attach your custom code
                log(options);removeColumn(options[0].start.col);
            }
        },
        '---------': {},
        'custom_call_show': { // type anything that is not already predefined by Handsontable
            name: 'Toggle Calls', // add your custom label
            callback: function(key, options) { //this is the part where you attach your custom code
                showCallData = !showCallData;
                if (showCallData)
                    hiddenPlugin.showColumn(3,4,5);
                else
                    hiddenPlugin.hideColumn(3,4,5);
                if (hot) hot.render();
            }

        },
        'custom_put_show': { // type anything that is not already predefined by Handsontable
            name: 'Toggle Puts', // add your custom label
            callback: function(key, options) { //this is the part where you attach your custom code
                showPutData = !showPutData;
                if (showPutData)
                    hiddenPlugin.showColumn(7,8,9);
                else
                    hiddenPlugin.hideColumn(7,8,9);
                if (hot) hot.render();
            }
        },
        '---------': {},
        filter_by_condition: {},
        filter_by_value: {},
        filter_action_bar: {},
    }
},
rowHeaders: true,
manualColumnMove: true,
filters: true,
fixedColumnsLeft: 2,
columnSorting: true,
manualColumnFreeze: true,
height: 600,
minSpareRows: 1,
licenseKey: 'non-commercial-and-evaluation',

}

#6

Hi @bg.newland

You mean, that the simplest config with just the data and colHeaders still doesn’t work? Can you also tell me which version of Handsontable do you use?

#7

7.4.2

#8

I also tried 12.1 (from fiddle) and same error

#9

Hi @bg.newland

I’m afraid there’s not much I can do without being able to replicate the issue. One more thing that comes to mind is, do you have Handsontable inside any kind of other container? And let me ask one again, did you check if the Handsontable instance isn’t destroyed at any point? As that’s what the error suggest.

#10

I don’t ever destroy the instance. I just changed it to hide/show with hiddenColumns - that doesn’t fail.

#11

I’m afraid there’s nothing else I can do without having replicable example. If you have an active support plan we can schedule a call next week and check it live. Send me your license ID at support@handsontable.com and I will check your current support plan.

#12

Sorry for the late response, I am using the evaluation license for now. I took out columns from the settings and used renderers for each columns. This is working fine with respect to this issue as the default filter inserts and removes columns, but now my filter options are text only for all of my columns. I am researching the docs to see what I can do to get the greater than, etc in the filter menus for numeric types. I believe the problem is that the hot instance doesn’t have the column type, only the renderers.

#13

Hi @bg.newland

I’m glad that you’ve found a solution that works in your environment. However, it’s still not clear to me why the implementation you showed in a previous examples doesn’t work.

The logic you used is a good approach to a functionality like this and using renderers instead might affect the performance, but if that works for you and if we can’t research the core of this issue it seems that currently it’s the only way.

#14