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

MHCCAIRTeamMHCCAIRTeam Posts: 18Questions: 3Answers: 0
edited August 2018 in Free community support

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,301Questions: 26Answers: 4,946
    Answer ✓

    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

  • MHCCAIRTeamMHCCAIRTeam Posts: 18Questions: 3Answers: 0

    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.

This discussion has been closed.