Disable Editor or Select plugins?

jdsveii

I'm using the Editor with inline mode and blurable true on the select plugin. I would like to programmatically enable and disable the editor based on user action. I found this post from 2016 but I can't seem to get it to work.

I try disabling the editor using this call:

$('#myTable').DataTable().select.style('api');

but it has no affect. The user can still click into cells and edit the values. Am I going about this wrong or is there a more updated way to achieve this?

colin

Hi @jdsveii ,

$('#myTable').DataTable().select.style('api');

This should disable Select from working. For inline editing, you should be able to remove the event handler that's listening for the selection.

This example here is doing both those things,

Cheers,

Colin

jdsveii

Hi @colin,
Thanks for the reply. The code you posted is identical to the code I originally posted. As I explained it is not functioning for some reason. No errors are thrown and nothing is in the console in Chrome. It appears to just not do anything at all strangely.

Also, I looked at your JS Bin link and I see it only disables the editor. I need the ability to not only disable select/edit from working but enable it afterwards as well.

colin

Hi @jdsveii ,

I'm not following, sorry. In that example I posted, it was disabling Select and Editor - prior to pressing the disable button, you can edit; after pressing it, you can't. Can you modify that example to demonstrate how it's not working for you, please.

To enable again, you just need to frun the on() again to activate inline editing, and call select.style() with your previous value, such as 'single',

Cheers,

Colin

jdsveii

@colin,
Can you elaborate on calling the on() method? I assume I need to pass in events but I'm not sure what to pass in since the events are automatically wired up when the editor is in inline mode. I tried to set up what you were asking in this link.

jdsveii

This is probably a better example. The DataTable comes back in edit mode but it is no longer in "inline" mode.

colin

Hi @jdsveii ,

Yep, you weren't doing the same code as before to enable inline - see your example modified here.

Cheers,

Colin

jdsveii

@colin
Thanks for all your help I'm so close to getting this working thanks to you.

Any idea how your solution would work when keytables are added like this? I don't think I can use the on click event handler anymore since I think keytables uses more than just click events?

colin

To be clear, are you trying to disable KeyTables too, or do you still want to be able to move the box around the table even after Editor is disabled?

jdsveii

@colin
I would like to disable keytables and editor. Basically I want to put the datatable in "view only" mode as if there are no keytables, select or editor present. But also be able to toggle all that back on with the buttons in the demo.

colin

Yep, from my last example then, it just needs keys.disable() added, see here.

jdsveii

@colin
A few behaviors I noticed with your last sample:

On page load behavior (this is how I want the page to behave):
1. When the page first loads note that the first column (Name) is not clickable or editable.
2. When you click an editable cell it does not immediately go into inline edit mode - it is only selected/highlighted unless you start typing. Both of these behaviors are how I expect it to behave.

After disabling then enabling the editor:
1. The first column (Name) is clickable and attempts to be edited but throws an error.
2. As soon as a cell is clicked it immediately goes into inline edit mode rather than just selecting/highlighting it like when the page first loads.

I'm pretty sure this is because we're not simply disabling and enabling the select plugin but instead ripping its functionality out via .on() and .off() calls. Is there a way to gracefully toggle the select plugin on/off so it doesn't lose its selector criteria?

jdsveii

N/A