disable Datatable field

nlooije

Test case: http://live.datatables.net/mojolena/1/edit (note: disable CORS to use)

Using the disable method on a field (e.g. select) disables the field and prevents user input on that field.
I have several nested Datatable editors which i would like to disable in similar fashion.
However, using disable on those fields:
1. Gives an error:
dataTables.editor.min.js:1 Uncaught TypeError: Cannot read property 'prop' of undefined
as if the field is undefined, where as i can clearly see it is defined using the fields method.
Furthermore, if changed from datatable to select type gives no issues.
2. Sets the styles for a disabled field (e.g. greyed text and border) but user interactivity is not blocked (e.g. buttons are visible, can be clicked and forms for new, edit and edit are opened).

Is this a bug or perhaps not implemented?

allan

This is a bug I'm afraid. It looks like I haven't implemented the disable() method with specifics for the datatable field type. I'm just working on that at the moment and will send a patch shortly.

Allan

nlooije

Hi @Allan, good to know, looking forward to it

allan

That's the fix committed. As a workaround until we release the patch update, you can add the following after you've loaded the Editor Javascript. These two functions will patch in the required functionality.

$.fn.dataTable.Editor.fieldTypes.datatable.disable = function ( conf ) {
    conf.dt.select.style('api');
};

$.fn.dataTable.Editor.fieldTypes.datatable.enable =function ( conf ) {
    conf.dt.select.style(conf.multiple ? 'os' : 'single');
};

Regards,
Allan

nlooije

Thank you Allan for the quick fix.

Maybe i misunderstood how to apply the patch but I am running into an error:
Cannot set property 'style' of undefined

see live.datatables.net/mojolena/6/edit

colin

That error you mentioned happens in your code whether Allan's snippet is present or not, so I believe it's unrelated as tat's where it should be, see my example here. Could you look at that, please, and see if it helps..

Cheers,

Colin

nlooije

Hi @colin, @allan,

They are actually two similar but different errors; I will post the full traceback so you can see.

Without the patch:
dataTables.editor.min.js:1 Uncaught TypeError: Cannot read property 'prop' of undefined at Editor.disable (VM281 dataTables.editor.min.js:1) at Field.<computed>.<computed> [as _typeFn] (VM281 dataTables.editor.min.js:1) at Field.<computed>.<computed> [as disable] (VM281 dataTables.editor.min.js:1) at HTMLDocument.<anonymous> (<anonymous>:107:30) at j (VM279 jquery-1.11.3.min.js:2) at Object.fireWith [as resolveWith] (VM279 jquery-1.11.3.min.js:2) at Function.ready (VM279 jquery-1.11.3.min.js:2) at HTMLDocument.J (VM279 jquery-1.11.3.min.js:2) at runner-3.17.11.min.js:1 at runner-3.17.11.min.js:1

with the patch:
Uncaught TypeError: Cannot set property 'style' of undefined at _Api.<anonymous> (VM283 dataTables.select.js:876) at _Api.iterator (VM280 jquery.dataTables.js:7091) at _Api.<anonymous> (VM283 dataTables.select.js:875) at Function.style (VM280 jquery.dataTables.js:7258) at Editor.$.fn.dataTable.Editor.fieldTypes.datatable.disable (<anonymous>:7:22) at Field.<computed>.<computed> [as _typeFn] (VM281 dataTables.editor.min.js:1) at Field.<computed>.<computed> [as disable] (VM281 dataTables.editor.min.js:1) at HTMLDocument.<anonymous> (<anonymous>:107:30) at j (VM279 jquery-1.11.3.min.js:2) at Object.fireWith [as resolveWith] (VM279 jquery-1.11.3.min.js:2)

The weird thing is if i use console.log(conf.dt.select) in the patch i can clearly see the property style is defined but when it is called it gives the error that property 'style' if undefined can't be set

allan

No you are right. The patch isn't quite right - it works correctly when the DataTable already exists, but if you call it immediately, after initialisation, then no it doesn't work. Let me get back to you on this one.

Allan

nlooije

Yes, if i wrap the patch and the disable calls in a setTimeout then it disables the selection of rows in the datatable, see: test case

But it does not yet deactivate the interactivity on the buttons or hide them, is this possible?

allan

I tracked it down, it was actually a bug in Select (fixed here). It will be in the nightly build soon.

For the buttons, to hide them when the input is disabled, use:

$.fn.dataTable.Editor.fieldTypes.datatable.disable = function ( conf ) {
    conf.dt.select.style('api');
    conf.dt.buttons().container().css('display', 'none');
};
 
$.fn.dataTable.Editor.fieldTypes.datatable.enable = function ( conf ) {
    conf.dt.select.style(conf.multiple ? 'os' : 'single');
    conf.dt.buttons().container().css('display', 'block');
};

I think that will work better than a disable on the buttons, since a subsequent enable would be non-trivial (needing to take into account the config options and state of the row selection).

Allan

nlooije

Awesome, thanks