Editor using field type checkbox not rendering 'isChecked' on the inline editor input

MHCCAIRTeam · August 2018

I have an editor setup with a field as a checkbox for a boolean value in my database using something like this:

                fields: [
                    {
                    label: "Completed",
                    name: "isComplete",
                    type: "checkbox",
                    separator: "",
                    options: [
                        { label: "", value: 1 }
                    ],
                    unselectedValue: 0
                }
                ]

I am using the inline editing feature on the editor as well. The problem I am having is when the value is "true" (1 in this case) the checkbox isn't selected/checked. Everything is saved correctly when updating and the data table is rendered correctly. The problem I am having is the inline editor input checkbox is never 'checked' (property isChecked) despite the value saved in the database. Is there a way to set how the input renders or am I missing something?

kthorngren · August 2018

Are you disabling inline editing on the column that contains the checkbox?

This is snippets from one of my pages using checkbox:

Editor Field:

        {
            "name": "main.enabled",
            "label": "Collection Enabled:",
            "type": "toggle",
            "separator": "|",
            "unselectedValue": [
                0
            ],
            "options": [
                {
                    "label": "",
                    "value": 1
                }
            ]
        },

DT RowCallback:

"rowCallback": function ( row, data ) { $('input.editor-enabled', row).prop( 'checked', data.main.enabled == 1 )
},

Code to update checkbox:

    // Update checkbox during inline editing
    $('#main-table').on( 'change', 'input.editor-enabled', function () {
        //console.log('enabled change', $(this).prop( 'checked' ) ? 1 : 0);
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'main.enabled', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
    } );

The checkbox is in column 6 (:nth-child(6)) - don't inline edit

    // Activate an inline edit on click of a table cell
    $('#main-table').on( 'click', 'tbody td:not(:first-child, :nth-child(6), :nth-child(7), :last-child)', function (e) {
        editor.inline( this, {
            onBlur: 'submit',
        } );
    } );

HTH,
Kevin

MHCCAIRTeam · August 2018

Thanks Kevin!! I don't have inline editing disabled on that column. I think I'll do the same as you - it looks more elegant than using the inline editor as I am now. I ended up finding my problem. Changing:

            options: [
                { label: "", value: 1 }
            ],

to:

    options: [
        { label: "", value: "True" }
    ],

fixed the issue of the checkbox ignoring the current value of the field and not being checked inside of the inline editor (isChecked property). I guess this is because its a boolean and its coming back as "True" rather than 1 as I had expected.

Editor using field type checkbox not rendering 'isChecked' on the inline editor input

Editor using field type checkbox not rendering 'isChecked' on the inline editor input

Answers

Howdy, Stranger!

Categories

DataTables

Editor using field type checkbox not rendering 'isChecked' on the inline editor input

Editor using field type checkbox not rendering 'isChecked' on the inline editor input

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables