Checkbox Check State for Wrapped/Collapsed Responsive Row

robmilton

I have a table with a checkbox in the next to last column simply displaying the column value (not used selection). The checkbox displays and functions as intended when the row is not collapsed. But when the table becomes narrow enough so that the row is collapsed and the checkbox is displayed only by expanding the row the checkbox itself is visible but the check mark is not.

The checkbox state is actually correct. I have a listener that responds to click events that demonstrates the state of the checkbox is correct. But if the state is checked the check mark is not visible.

What do I need to do to have the checkbox show the check mark when the row is collapsed?

Here's the code I'm using to define the table, rows and listeners (with the columnDefs for the columns prior to the checkbox column removed). The column is 'targets: 8, 'data': 'isAdmin'...

                                        globalvars.datatableAccountsTable = $('#AccountsTable').DataTable({
                                            "order": [[0, "asc"]],
                                            data: responseVal.accountList,
                                            "columnDefs": [
                                                ...
                                                {
                                                    'targets': 8,
                                                    'data': 'isAdmin',
                                                    'width': '5%',
                                                    'responsivePriority': 1,
                                                    'className': 'centerCell',
                                                    'render': function (data, type, row) {
                                                        if (type === 'display') {
                                                            return '<input type="checkbox" class="chkAdmin">';
                                                        }
                                                        return data;
                                                    }
                                                },
                                                {
                                                    'targets': 9,
                                                    'width': '5%',
                                                    'responsivePriority': 1,
                                                    'data': null,
                                                    'searchable': false,
                                                    'orderable': false,
                                                    'className': 'centerCell',
                                                    'defaultContent': '<button type="button" class="btn btn-primary tt-btn btn-sm btn-edit">Edit</button>'
                                                }
                                            ],
                                            rowCallback: function (row, data) {
                                                // Set the checked state of the checkbox in the table
                                                $('input.chkAdmin', row).prop('checked', data.isAdmin == true);

                                                // Set the checkbox name
                                                $('input.chkAdmin', row).prop('name', data.userPrincipalName);
                                            }
                                        });

                                        // Handle click on check boxes
                                        $('#AccountsTable').on('click', '.chkAdmin', function (e) {
                                            e.preventDefault();

                                            var tr = $(this).closest('tr');
                                            if ($(tr).hasClass('child')) {
                                                tr = $(tr).prev();
                                            }
                                            var data = globalvars.datatableAccountsTable.row(tr).data();

                                            // Show dialog
                                            //ui.showMessageModal("Checked Admin", data.userPrincipalName, "Ok", false, true);

                                            var obj = {
                                                upn: data.userPrincipalName,
                                                isAdmin: data.isAdmin,
                                                table: globalvars.datatableAccountsTable,
                                                row: tr
                                            };

                                            utils.checkToggleAdmin(obj);

                                        });


                                        // Handle click on "Edit" button
                                        $('#AccountsTable').on('click', '.btn-edit', function () {

                                            var tr = $(this).closest('tr');
                                            if ($(tr).hasClass('child')) {
                                                tr = $(tr).prev();
                                            }
                                            var data = globalvars.datatableAccountsTable.row(tr).data();

                                            //// Show dialog
                                            //ui.showMessageModal("Clicked Edit", data.userPrincipalName, "Ok", false, true);

                                            var userInfo = {
                                                id: data.id,
                                                userPrincipalName: data.userPrincipalName,
                                                teamId: data.teamId
                                            };

                                            ui.showAssignUserToTeamModal(userInfo);

                                        });

robmilton

I guess the summary is: How do I get the check mark to render for checkboxes that are collapsed/hidden as a result of the responsive behavior of the table... when you expand the collapsed/hidden content for the row by clicking the plus sign?

allan

Could you try using this in your DataTable initialisation please?:

responsive: {
  details: {
     renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
  }
}

The problem is that Responsive will clone the child elements by default. Since you are using an input element, you don’t want that to happen - you what the original to be used. The listHiddenNodes renderer is a beta of how that can be done.

Allan

robmilton

That seemed to do the trick. I've confirmed on desktop Chrome, Edge, and Firefox and on mobile Safari and Chrome.

Thanks for the response and the help!