How to get Checkboxes properly to work?

Demytjr2111

Test case cannot really be provided as this piece relies on my PHP database to be bundled with to correctly display data.
Uncaught TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')
at Checkboxes.isCellSelectable (dataTables.checkboxes.min.js:5:11397)
at B.<anonymous> (dataTables.checkboxes.min.js:5:13773)
at B.iterator (jquery.dataTables.min.js:120:199)
at B.<anonymous> (dataTables.checkboxes.min.js:5:13583)
at Object.select (jquery.dataTables.min.js:122:330)
at HTMLInputElement.<anonymous> (rooster:487:58)
at HTMLTableElement.dispatch (jquery-3.6.0.min.js:2:43064)
at HTMLTableElement.v.handle (jquery-3.6.0.min.js:2:41048)
isCellSelectable @ dataTables.checkboxes.min.js:5
(anonymous) @ dataTables.checkboxes.min.js:5
iterator @ jquery.dataTables.min.js:120
(anonymous) @ dataTables.checkboxes.min.js:5
(anonymous) @ jquery.dataTables.min.js:122
(anonymous) @ rooster:487
dispatch @ jquery-3.6.0.min.js:2
v.handle @ jquery-3.6.0.min.js:2: This is the error I'm currently getting.
Description of problem: I'm trying to get RowGrouping to work with Checkboxes extension from Gyrocode, which is a datatables plugin/extension however I'm being disturbed by this error and can't really figure it out.

The code:

 var table = $('#rooster').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "private",
            },
            select: {
                style: 'multi'
            },
            order: [
                "4", "asc"
            ],
            rowId: 'id',
            mark: true,
            responsive: true,
            dom: 'Bfrtip',
            rowGroup: {
                endRender: function(rows, group) {
                    let split = group.split(", ");
                    return "Totale salaris voor: " + split[0] + ` (${split[1]}) : ` + "€" + rows.data()
                        .pluck("totaal")
                        .sum();
                },
                dataSrc: "maand",
                'startRender': function(rows, group) {
                    // Assign class name to all child rows
                    var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
                    var rowNodes = rows.nodes();
                    rowNodes.to$().addClass(groupName);

                    // Get selected checkboxes
                    var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);

                    // Parent checkbox is selected when all child checkboxes are selected
                    var isSelected = (checkboxesSelected.length == rowNodes.length);

                    return '<label><input type="checkbox" class="group-checkbox" data-group-name="' +
                        groupName + '"' + (isSelected ? ' checked' : '') + '> ' + group + ' (' + rows.count() + ')</label>';
                }
            },
            columns: [{
                    data: null,
                    defaultContent: "",
                    orderable: false
                },
                {
                    data: null,
                    'checkboxes': {
                        'selectRow': true
                    }
                },
                {
                    data: "maand",
                },
                {
                    data: "week"
                },
                {
                    data: "starttijd"
                },
                {
                    data: "eindtijd"
                },
                {
                    data: "Werkgever"
                },
                {
                    data: "werkuren"
                },
                {
                    data: "uurloon"
                },
                {
                    data: "totaal"
                },
                {
                    data: "ziek"
                }
            ],
                select: {
                style: 'multi',
                selector: 'td:nth-child(2)'
            },
            buttons: [{
                    extend: "create",
                    text: "Nieuwe gebruiker",
                    editor: editor
                },
                {
                    extend: "edit",
                    text: "Bewerk gebruiker",
                    editor: editor
                },
                {
                    extend: "remove",
                    text: "Verwijder gebruiker",
                    editor: editor
                },
            ],
            splitEuro: function(row, data, dataIndex) {
                let totaal = document.querySelector('td:eq(9)');
                console.log(row)
            },

            createdRow: function(row, data, dataIndex) {

                $(row).find('td:eq(9)')
                    .attr('data-sort', data.sort ? data.totaal : function() {
                        let split = data.totaal.split("€")
                        return split[1]
                    })
                    .addClass('data-sort')
            },
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api();
                api.columns(9, {
                    page: 'current'
                }).every(function() {
                    var sum = this
                        .nodes()
                        .reduce(function(a, b) {
                            var x = parseFloat(a) || 0;
                            var y = parseFloat($(b).attr('data-sort')) || 0;
                            return x + y;
                        }, 0);
                    $(this.footer()).html("€" + sum.toFixed(2));
                })
            },

        });
        $('#rooster').on('click', '.group-checkbox', function(e) {
            // Get group class name
            var groupName = $(this).data('group-name');

            // Select all child rows
            table.cells('tr.' + groupName, 0).checkboxes.select(this.checked);
        });

        // Handle click event on "Select all" checkbox
        $('#rooster').on('click', 'thead .dt-checkboxes-select-all', function(e) {
            var $selectAll = $('input[type="checkbox"]', this);
            setTimeout(function() {
                // Select group checkbox based on "Select all" checkbox state
                $('.group-checkbox').prop('checked', $selectAll.prop('checked'));
            }, 0);
        });
    });

kthorngren

We will need to see the problem to help debug. Looks like the Gyrocode checkboxes plugin is erroring on something but its impossible to say what without being able to debug the problem live. You can ask the Gyrocode developer if there are known issues with rowGroup.

Since the problem is likely not specific to your data you should be able to build a test case to demonstrate the issue. You can use one of the JS Bin examples as a starter if you want ajax or server side processing capabilities. Let us know if you need help building the test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rf1234

I wonder why you need a plug in for checkboxes. They work fine without one.

This is a simple use case: Department preselection.
The user can preselect all departments, none or individual departments using a checkbox. I use Editor with this but that isn't required of course.

var ctrDeptSelectionEditor = new $.fn.dataTable.Editor({
    ajax: {
        url: 'actions.php?action=tblCtrDeptSelection'
    },
    table: "#tblCtrDeptSelection",
    fields: [ {
            name:      "govdeptSelected",
            type:      "checkbox",
            options:   [
                { label: '', value: 1 }
            ],
            separator: '',
            unselectedValue: 0
        }
    ]
});

var ctrDeptSelectionTable = $('#tblCtrDeptSelection').DataTable({
    dom: "Bfrltip",
    select: false,
    ajax: {
        url: 'actions.php?action=tblCtrDeptSelection'
    },
    columns: [
        {   data: "govdeptSelected",
            render: function ( data, type, row ) {
                if ( type === 'display' ) {
                    return '<input type="checkbox" class="editor-include">';
                }
                return data;
            }
        },
        {   data: "ctr_govdept.dept_name" },
        {   data: "userRole",
            render: function ( data, type, row ) {
                return renderRole(data);
            }
        },
        {   data: "ctr_installation", render: "[,<br>].instName"  },
        {   data: "gov", render: "[,<br>].govName"  },
        {   data: "gov", render: "[,<br>].govRegional12"  }
    ],
    order: [[1, 'asc'], [0, 'asc']],
    buttons: [
           "selectAllDepts",
           "selectNoDepts",
           "colvis" 
    ],
    rowCallback: function ( row, data, displayNum, displayIndex, dataIndex ) {
        // Set the checked state of the checkbox in the table
        $('input.editor-include', row).prop( 'checked', data.govdeptSelected >= 1 );
        if ( $('input.editor-include', row).is( ':checked' ) ) {
            $(row).addClass('fontThick');
        } else {
            $(row).removeClass('fontThick');
        }
    }    
});

$('#tblCtrDeptSelection').on( 'change', 'input.editor-include', function () {
    $.busyLoadFull("show");
    ctrDeptSelectionEditor
        .edit( $(this).closest('tr'), false )
        .set( 'govdeptSelected', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
    ctrDeptSelectionTable.ajax.reload( function(){
                             $.busyLoadFull("hide");
                         }, false)
                         .columns.adjust()
                         .responsive.recalc();
} );