type select and readonly

montoyam

I don't see any documentation for allowing two "type" options for a field in editor. I have field that is a type:select, but in some instances I need to have that field read-only. I found the following example on how to make readonly dynamic: https://datatables.net/forums/discussion/60190

but how do I do this for a select box? Is there another parameter I can use, such as disabled, or locked?

colin

Yep, you can only have one type. The way to go here would be to call field().disable() in opened based on your logic.

Colin

rf1234

A field can only have one type but you can change the field type dynamically if required.

In case you think the disable option is not sufficient - you'll definitely need it to make the field "read only"! - then you can also make the "select" field a text field for example by removing it first and then adding it with the right field type.

This is from my own coding: Depending on a parameter I need to either have a regular text field or a datetime field.

table
    .on('select', function () {       
        var selected = table.row({selected: true}); 
        var that = yourEditor;
        if (selected.any()) {
            var fieldType = selected.data().filtr.field_type;
            that.clear("value_range.value");
            if (fieldType != 7) { // 7 is date
                that.add( {
                    label: lang === 'de' ? 'Wert:' : 'Value:',
                    name:  "value_range.value"
                } );
            } else {
                that.add( {
                    label: lang === 'de' ? 'Wert:' : 'Value:',
                    name:  "value_range.value",
                    type: "datetime",
                    format: 'L',
                    opts: {
                        showWeekNumber: true,
                        yearRange: 40,
                        momentLocale: momentLocale
                    }
                } );
            }
        }
    })

montoyam

i was thinking of making it a textbox in the editor (then i could make it readonly) by adding the source of the combo as a leftjoin link. but i got an error when trying to reference the linked table data in the editor.

colin

That sounds like a lot of work, and an odd change to the interface. This was what I had in mind here - the field office is disabled if the age is over 50.

Colin

montoyam

thanks colin, that is exactly what I am looking for. However, I have several fields that I need to do this to. If I assign a class to these fields, such as '.DynamicDisable', is there a way to disable the fields via this class instead of doing each field seperately?

montoyam

colin, one thing I noticed is that field remains disabled if you then click back to an age under 50. You need to add an 'else' to set it back to enabled. too bad .disable didn't accept a Boolean value you can set it like .disabled(age<50).

rf1234

Unfortunately you can't have a class as a selector in fields() but you can pass an array of field names like in here:

montoyam

ah, yes, much cleaner looking since you can't use classes. and I guess since you need to enable if false, then putting them in an array you can use the pre-loaded array in the enable and disable.

rf1234

You are right. I personally never use field() or fields(). Even if I am dealing with just one field. The alternative syntax is more flexible. Same with setting field values like in this one:

editor
    .on('open', function (e, mode, action) {
        if ( action === 'create' ) {
            this.disable(['infoma.automatic'])
                .set({'infoma.net_prolongations': 1});
        } else if ( action === 'edit' ) { //if we don't have any posting runs you can't turn on automtic posting
            if ( someTable.rows().count() < 1 ) {
                this.disable(['infoma.automatic'])
                    .set({'infoma.automatic': 0});
            } else {
                this.enable(['infoma.automatic']);
            }
        }
    })

editor.disable()
editor.enable()
editor.show()
editor.hide()
all work with arrays of field names
editor.set() works with an object with one or multiple name value pairs.

like in here:

editor.set( { 'fixed.cash_pool_funding': 0,
            'fixed.cash_pool_lending': 0 } )
    .hide( ['fixed.cash_pool_funding',
            'fixed.cash_pool_lending'] );

With buttons you can use classes. Not with fields though ... This works:

table.buttons('.DynamicDisable').disable();

montoyam

Thanks for the tips. I like how you brought the reference of classes from my other question here

But, the style of 'readonly' is so much nicer than the style of 'disabled'. I'm guessing it is possible to change the style after the datatabe css is brought in, but does anyone know the name of the class I need to change? I can never find the editor elements when I go to inspect the page in developer mode.

rf1234

In Bootstrap 3 both styles are identical. The only difference being that you still see the dropdown icon in case you only disable a field.

I experimented with my field "rate.currency"
Disable it: grey style the field is blocked.
Use jQuery to make it "readonly": The field is readonly but the dropdown still works - and you can change the selection.
Then I used jQuery to remove all unselected options.

That's all nice but I don't see a nicer style in Bootstrap 3.

rateEditor
    .on('open', function(e, mode, action) {  
        // this.disable(["rate.currency"]);
        $('#DTE_Field_rate-currency').attr('readonly', true);
        $('#DTE_Field_rate-currency').find('option').not(':selected').remove();

    })

Regarding inspection: It works in Chrome. Just open the editor, go over the form element and right click "inspect" when having the developer window opened.

If I use the below the field looks like disabled() through the api. Don't know whether this would make a difference in style in Bootstrap 4. Just give it a try:

$('#DTE_Field_rate-currency').attr('readonly', true);
$('#DTE_Field_rate-currency').attr('disabled', true);

And of course you can apply css on "open" - like in here. In this example I apply css to the search field of the data table. Make it bigger etc. So you can basically do anything. You just need to get the selectors right - and for that you need to be able to inspect the Editor form. Good luck!

ctrTable
    .on ('init', function () {
        $('*[type="search"][class="form-control input-sm"]')
                .addClass('input-lg')
                .css({ 'width': '400px', 'display': 'inline-block' });
        $('div.dataTables_filter').css({ 'margin-top': '1em' });
    })

allan

They are identical for me in Firefox without any additional styling as well: http://live.datatables.net/yuxaraja/1/edit .

Perhaps you can show us a screenshot of the difference you are seeing @montoyam?

Allan

montoyam

montoyam

the fields that are gray are disabled. The fields SubmissionID and Question Category (Imported), Added By, and Record Added are 'readonly'

@Allan, in your example you posted, in Chrome and IE they look different, just like my screen shot.

montoyam

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="css/generator-base.css" />
    <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css" />

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>    

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/keytable/2.5.1/js/dataTables.keyTable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.5.1/css/keyTable.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css" />

{ "label": "SubmissionID:", "name": "Submissions.SubmissionID", type: "readonly" },
{ "label": "Question Category (Imported):", "name": "Submissions.QuestionCategoryImport", type: "readonly" },

            SubmissionsEditor.on('opened', function (e, node, data, items, type) {
                var addedBy = SubmissionsEditor.field('Submissions.EnteredBy').get();
                if (addedBy == 'Submission Form Import') {
                    SubmissionsEditor.disable(
                        [
                            'Submissions.EmployeeName'
                            , 'Submissions.EmployeeEmail'
                            , 'Submissions.EmployeeDepartment'
                            , 'Submissions.EmployeeClassification'
                            , 'Submissions.EmployeeQuestion'
                            , 'Submissions.SubmissionTypeID'
                        ]
                    );
                } else {
                    SubmissionsEditor.enable(
                        [
                            'Submissions.EmployeeName'
                            , 'Submissions.EmployeeEmail'
                            , 'Submissions.EmployeeDepartment'
                            , 'Submissions.EmployeeClassification'
                            , 'Submissions.EmployeeQuestion'
                            , 'Submissions.SubmissionTypeID'
                        ]
                    );
                }

            });

montoyam

I could probably make the textboxes readonly and only the two pull-downs disabled, but it would be best if they looked the same. I have tried in IE and Chrome. We don't use other browsers here.

allan

Sounds like an IE quirk in that case, as it would happen with all input elements using disabled or readonly - not just those in Editor. You could add this to your CSS:

input[disabled],
input[readonly] {
  background-color: rgba(0,0,0,0.1);
}

Allan

montoyam

it shows this way in both IE and chrome.

that fix didn't seem to make any change, but I will work with our CSS guru over here to see if he can help me.

montoyam

well, I thought I had a workaround, but it didn't work for the select inputs. After researching, I see that select does not have a 'readonly' attribute, so it is not just a limitation of dataTables.net....bummer. However, I did come up with a workaround to use class names instead of referencing each one seperately. This uses a template for an editor:

        <div id="customForm">
            <fieldset class="name">
                <legend>Name</legend>
                <div data-editor-template="Submissions.SubmissionID"></div>
                <div data-editor-template="Submissions.EmployeeName" class="lockable"></div>
                <div data-editor-template="Submissions.EnteredBy" class="lockable"></div>
            </fieldset>
        </div>

    SubmissionsEditor.on('opened', function (e, node, data, items, type) {
        var addedBy = SubmissionsEditor.field('Submissions.EnteredBy').get();
            $(".lockable").find(":input").attr('readonly', addedBy == 'Submission Form Import');
                        $(".lockable").find("select").attr('disabled', addedBy == 'Submission Form Import');
    });

plus, using this method, if your template has several fieldsets, you can lock an entire fieldset by using the classname of the fieldset. so in my example above, $(".name").find(":input) pretty cool.

again, I had to make the select inputs disabled, but at least you can use class names with this method.

for select inputs, there were tips to have a hidden input box, but that was for forms to be able to submit disabled input boxes. I am not going to give up though