Always Shown Checkbox Not Displaying Properly

picasso566

Thank you for the great table BTW.

Datables 1.10.15 Editor 1.6.3

I am trying to apply these:
https://datatables.net/blog/2014-09-09
https://editor.datatables.net/examples/api/checkbox.html

What I end up with is a check box left justified in the table cell and if I click it, it's state does not change but it then goes into edit mode and the new checkbox is centered in the cell. If I then click that one and lose focus it updates properly and the checkbox then jumps back to left justified. I have walked through the css and cannot find the cause. One thing is that in the examples, the centering is done with className: "dt-body-center" but the editor has a number of div wrappers for the checkbox (6 levels deep) so I don't know if the example is for an older version. My code is below.

Please let me know if you have any idea why this is not working.

Thanks,

Paul

    <div class="row">
        <div class="@bigColClass">
            <div class="col-xs-12">
                <table id="candidateDocumentList" data-page-length='10' class="table table-bordered table-hover dataTable table-striped ">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Default</th>
                            <th>Document Type</th>
                            <th>Filename</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>CreatedOn</th>
                            <th>UploadedBy</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    
    var candidateDocumentEditor = new $.fn.dataTable.Editor({
                ajax: {
                    dataType: "json",
                    "url": "/CandidateData/DocumentEdit",
                    "type": "POST",
                    "data": function (data) {
                        data.CandidateID = candidateEditorCandidateID;
                    },
                    success: function (json) {
                        return json;
                    },
                    error: function (xhr, error, thrown) {
                        error(xhr, error, thrown);
                    }
                },
                table: "#candidateDocumentList",
                idSrc: 'documentID',
                fields: [
                    { "label": "DocumentID", "name": "documentID", "type": "hidden" },
                    {
                        label: "Default:",
                        name: "isDefault",
                        type: "checkbox",
                        separator: "|",
                        options: [
                            { label: '', value: 1 }
                        ]
                    },
                    {
                        "label": "Document Type", "name": "documentTypeID", "type": "select",
                        "options": CandidateDocumentTypesLookupList()
                    },
                    { "label": "Title", "name": "documentTitle", attr: { maxlength: 256 } },
                    { "label": "Description:", "name": "documentDescription", attr: { maxlength: 1024 } }
                ],
                i18n: {
                    edit: {
                        button: "Edit",
                        title: "Edit Document",
                        submit: "Save"
                    },
                    remove: {
                        button: "Delete",
                        title: "Delete Document",
                        submit: "Delete",
                        confirm: {
                            _: "Are you sure you want to delete these %d Documents?",
                            1: "Are you sure you want to delete this Document?"
                        }
                    },
                    error: {
                        system: "An error occurred while updating the Document. Please try again."
                    }
                }
            });
    
    
    var candidateDocumentTable = $('#candidateDocumentList').DataTable({
                dom: "Btp",
                order: [[0, "desc"]],
                processing: true,
                serverSide: true,
                rowId: 'DocumentID',
                idSrc: 'DocumentID',
                pageLength: 10,
                language: {
                    processing: datatablesProcessingText
                },
                ajax: {
                    "url": "/CandidateData/DocumentList",
                    "type": "POST",
                    "data": function (data) {
                        data.CandidateID = candidateEditorCandidateID;
                    }
                },
                autoWidth: false,
                columns: [
                    { data: "documentID" },
                    {
                        title: "Default",
                        data:   "isDefault",
                        render: function (data, type, row) {
                            if (type === 'display') {
                                return '<input type="checkbox" class="editor-active">';
                            }
                            return data;
                        },
                        className: "dt-body-center"
                    },
                    { data: "documentTypeID", "render": function (data, type, row, meta) { return LookupListDisplayValue("zlDocumentType", data); } },
                    {
                        data: "fileName", "render": function (data, type, row, meta) {
                            var iconStr = '<i class="fa *faIcon* file-document-icon"></i>';
                            var t = '';
                            if (row['documentExtension'] == '.pdf')
                                t = ' target="_blank" ';
                            return '<a href="/Document/Download/' + row['documentID'] + '/?fileName=' + urlEncodeString(data) + '" ' + t + ' class="document-download-link">' + iconStr.replace("*faIcon*", GetFAFileIconForExtension(row['documentExtension'])) + "&nbsp;&nbsp;&nbsp;" + data + '</a>';
                        }
                    },
                    { data: "documentTitle" },
                    { data: "documentDescription" },
                    {
                        data: "createdOn",
                        "render": function (data, type, row, meta) {
                            return FormatTableDate(data);
                        }
                    },
                    { data: "uploadedBy" }
                ],
                select: {
                    style: 'os',
                    //selector: 'td:first-child'
                    selector: 'td:not(:nth-child(2))'
                },
                rowCallback: function (row, data) {
                    // Set the checked state of the checkbox in the table
                    console.log(data);
                    $('input.editor-active', row).prop('checked', data.isDefault == 1);
                },
                buttons: candidateDocumentEditorButtons()
            });
    
            $('#candidateDocumentList').on('change', 'input.editor-active', function () {
                editor
                    .edit($(this).closest('tr'), false)
                    .set('isDefault', $(this).prop('checked') ? 1 : 0)
                    .submit();
            });
    
            if (CanEditCandidate) {
                $('#candidateDocumentList').on('click', 'tbody td:not(:first-child, :nth-child(4), :nth-child(7), :nth-child(8))', function (e) {
                    candidateDocumentEditor.inline(candidateDocumentTable.cell(this).index(), { onBlur: 'submit' });
                });
            }
    
    
        });
    </script>

allan

If the click event is placing the cell into inline edit mode, then the problem is going to be with this:

$('#candidateDocumentList').on('click', 'tbody td:not(:first-child, :nth-child(4), :nth-child(7), :nth-child(8))', function (e) {

You would want to not trigger inline editing on :nth-child(2) as well here.

Given how many columns you are excluding from inline editing, I would actually suggest that you use columns.className to add a class to just the columns you want to be editable and then use that as part of the selector. There is an example of that here.

Allan

picasso566

Thank you! Couldn't see the forest for the toothpicks.

Now if I could just style the checkbox in the datatable! All css seems to be wiped out by the table.

allan

I'd need a link to a page showing that CSS issue to be able to help I'm afraid.

Allan