Permanent Inline Checkboxes -- click/change only registered "outside" of containter

rldean1

I'm following the blog article Permanent Inline Checkboxes and Always Shown Checkbox. This is pretty awesome, and I've had success implementing it. Side note: I'm using Bootstrap. I had to use text-center for columns.className.

As I click the checkboxes, "checks" and "unchecks" ARE registered, and sent to the database. Information coming back from the database is displayed appropriately.

If I stay inside of the <td>checkbox</td> field, it will not register new clicks (checks or unchecks). Also, you've got to be pretty precise when clicking the checkbox; If you click just outside, no new clicks are registered. Lastly, there's a weird blue box around the input, presumably from the OS.

ANYWAY, If I go from row, to row, to row, and click the boxes, things work as expected. Problems occur if you stay inside of the <td>Publish</td>, and try to re-click the box.

What should I be looking at? Can you recommend an approach to fix this? Should I render the html differently?

editor = new $.fn.dataTable.Editor({
    table: "#example",
    fields: [
        {
            label: "Publish:",
            name: "Publish",
            type: "checkbox",
            /**
             * use the separator option to have Editor submit the data as a string, 
             * rather than as an array
             */
            separator: "|",
            options: [
                { label: "", value: 1 }
            ],
            //unselectedValue: 0
        },
    ],

table = $('#example').DataTable({
    dom: "Bfrtip",
    data: aoo,
    columns: [
        {
            data: 'Publish',
            title: 'Publish',
            visible: true,
            render: function (data, type, row) {
                if (type === 'display') {
                    return '<input type="checkbox" class="editor-publish">';
                }
                //return data;
                return (data == 0) ? '0' : '1';
            },
            className: "text-center"
        }
    ],
    /**
     * select the row if any part of the row is clicked, except for the last column
     */
    select: {
        style: 'os',
        selector: 'td:not(:last-child)' // no row selection on last column
    },
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit", editor: editor },
        { extend: "remove", editor: editor }
    ],
    rowCallback: function (row, data) {
        /**
         * Set the checked state of the checkbox in the table.
         * rowCallback function is run for every row that is displayed by DataTables
         */
        $('input.editor-publish', row).prop('checked', data.Publish == 1);
    }
});

// Activate an inline edit on click of a table cell
$('#example').on('click', 'tbody td', function (e) {
    editor.inline(this);
});

$('#example').on('change', 'input.editor-publish', function () {

    /**
     * https://datatables.net/blog/2014-09-09
     */
    editor
        //call the edit() method to start an edit for the row; do not display form (as it would by default)
        .edit($(this).closest('tr'), false)
        //the set() method is used to set the value of the field based on the checkbox that was toggled
        .set('Publish', $(this).prop('checked') ? 1 : 0)
        .submit();
});

kthorngren

Basically you need to remove the checkbox column from the inline editor event handler then create a new event handler to submit the updated checkbox, for example:

Inline edit all but column 0 (in your example this is the only column):

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

The checkbox event handler. It sets the field "Publish" based on the check value then submits:

    $('#example').on( 'change', 'input.editor-publish', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'Publish', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
    } );

I think you can just copy and paste this code into your script.

Kevin

rldean1

@kthorngren OH, that's damn brilliant! That fixed everything. I forgot that the Inline Edit listener was there. That was definitely the conflict.

Thank you!