disable Datatable field

disable Datatable field

nlooijenlooije Posts: 26Questions: 5Answers: 0
edited August 2021 in Editor

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 55,097Questions: 1Answers: 8,651 Site admin

    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

  • nlooijenlooije Posts: 26Questions: 5Answers: 0

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

  • allanallan Posts: 55,097Questions: 1Answers: 8,651 Site admin

    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

  • nlooijenlooije Posts: 26Questions: 5Answers: 0

    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

  • colincolin Posts: 13,282Questions: 0Answers: 2,268

    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

  • nlooijenlooije Posts: 26Questions: 5Answers: 0

    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

  • allanallan Posts: 55,097Questions: 1Answers: 8,651 Site admin

    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

  • nlooijenlooije Posts: 26Questions: 5Answers: 0

    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?

  • allanallan Posts: 55,097Questions: 1Answers: 8,651 Site admin
    Answer ✓

    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

  • nlooijenlooije Posts: 26Questions: 5Answers: 0

    Awesome, thanks

Sign In or Register to comment.