Completely disable a handsontable

Question

I have just started using handsontable with JSON data and its working great but I need to disable all table input to certain users (read-only view).

Is there a way to completely disable a handsontable so none of the inputs respond and the remove row plugin doesn't function? I have tried http://dougestep.com/dme/jquery-disabler-widget-demos which doesn't seem to work and http://malsup.com/jquery/block/#element which works but it essentially creates an iframe overlay over the controls and with the removerow plugin the position is off set incorrectly.

Have you tried the readOnly option ? https://github.com/warpech/jquery-handsontable/wiki/Options http://handsontable.com/demo/readonly.html — anderssonola, Mar 17 '14 at 12:36
I have considered it but it will be messy to set read only at column level and then specifically disable the remove row plugin too. I was hoping there was a way at table level. — PeteT, Mar 17 '14 at 12:41
You can disable the whole table with the cascading options? https://github.com/warpech/jquery-handsontable/wiki/Options#how-does-cascading-configuration-work And what's the remove row plugin? — anderssonola, Mar 17 '14 at 12:45

score 19 · Accepted Answer · edited Jan 20 '17 at 15:58

19

To fully "disable" a Handsontable I have done the following:

hot.updateSettings({
    readOnly: true, // make table cells read-only
    contextMenu: false, // disable context menu to change things
    disableVisualSelection: true, // prevent user from visually selecting
    manualColumnResize: false, // prevent dragging to resize columns
    manualRowResize: false, // prevent dragging to resize rows
    comments: false // prevent editing of comments
});

edited Jan 20 '17 at 15:58

Emii Khaos

9,983
3
34
57

answered Nov 25 '16 at 08:55

JonBrave

4,045
3
38
115

1

@PatrikKarisch Thank you for editing my code to change some blatantly stupid places where I had erroneously copied `false` where I meant `true`...! And without shouting at me! Because the gist of what my code does is useful, even though I clearly did not look closely enough at what I pasted... – JonBrave Jan 20 '17 at 13:37
You're welcome! Your code was really helpful as it disables the table completely and look beautiful too. `readOnly: true` only would leave selection and so and it doesn't feel really disabled without all your other options :) – Emii Khaos Jan 20 '17 at 15:57
This deserves to go up! I hope you don't mind, that I also changed your JS syntax ;) – Emii Khaos Jan 20 '17 at 15:58
The reason my syntax was not "neat", and that I had "erroneous glitches", is that in my code each attribute is done separately as wanted, and I had to gather the settings all together for here. I am happy that your changes are correct and make it neater for standalone code. – JonBrave Jan 23 '17 at 13:33
if you are using handsontable with React, you can access the `hot` object with `{/*ref.hotInstance*/}/>` – Oboo Cheng Oct 19 '18 at 15:06

score 2 · Answer 2 · answered Sep 30 '15 at 07:27

2

You can do this using the updateSettings

var hot = $("#exampleGrid").handsontable('getInstance');
hot.updateSettings({
        readOnly: true
    });

Check the following link: http://jsfiddle.net/Hn3Zv/

answered Sep 30 '15 at 07:27

Mohamed ElHamamsy

221
1
12

2

This is a good start, but only disables cell editing. Right-click still gives the "context menu", from which rows/columns can be inserted/removed, etc. Add `contextmenu: false` into `updateSettings()` to get rid of that too. – JonBrave Mar 11 '16 at 14:32
1

Sorry, to be exact it *must* be `contextMenu` (upper-case "M") and not `contextmenu` (same applies with `readOnly` versus `readonly`). The all lower-case versions *seem* to work for "most" clicks, but do not always. – JonBrave Mar 15 '16 at 10:38

Completely disable a handsontable

2 Answers2