Always Shown Checkbox Not Displaying Properly

Always Shown Checkbox Not Displaying Properly

picasso566picasso566 Posts: 4Questions: 1Answers: 0

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>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • picasso566picasso566 Posts: 4Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

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

    Allan

This discussion has been closed.