I am unable to use the Select Box in Inline editing.

lovedhaka

Hello,
I am not able to select the select box henceforth, not able to use Edit and Delete buttons in my Editor. Please find below are the files that i am adding please guide me if i am doing something wrong. Also, i am attaching the code for the same.
Thanks in Advance

List of Files...

block scripts
    script(src="/js/jquery.js")
    script(src="https://cdn.datatables.net/v/bs-3.3.6/dt-1.10.12/b-1.2.2/b-print-1.2.2/se-1.2.0/datatables.js")
    script(src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js")
    script(src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js")
    script(src="/js/dataTables.editor.min.js")
    script(src="/js/leads.js")

block styles
    link(href="https://cdn.datatables.net/v/bs-3.3.6/dt-1.10.12/b-1.2.2/b-print-1.2.2/se-1.2.0/datatables.min.css", rel="stylesheet")
    link(href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css", rel="stylesheet")
    link(href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css", rel="stylesheet")
    link(href="/css/editor.dataTables.min.css", rel="stylesheet")

Here is the code

var editor;
$(document).ready(function () {
    editor = new $.fn.dataTable.Editor({
        ajax: "/leads/editor",
        table: "#leads",
        idSrc:  'id',
        fields: [{
            label: "Location:",
            name: "location"
        }, {
            label: "Campaign:",
            name: "campaign"
        }, {
            label: "Educator:",
            name: "educator"
        }, {
            label: "First Name:",
            name: "f_name"
        }, {
            label: "Last Name:",
            name: "l_name"
        }, {
            label: "Phone:",
            name: "phonenumber"
        },  {
            label: "Potential Apt:",
            name: "potentialapt"
        },  {
            label: "Request Date:",
            name: "requestdate",
            type: "datetime"
        }, {
            label: "Request Time:",
            name: "requesttime"
        }
        ]
    });

    $('#leads').on('click', 'tbody td:not(:first-child)', function (e) {
        editor.inline(this, {
            onBlur: 'submit'
        });
    });


    var table = $('#leads').dataTable({
        processing: true,
        serverSide: true,
        searching: true,
        lengthMenu: [[20, 50, 100], [20, 50, 100]],
        ajax: {url: '/leads/datatable', "type": "POST"},
        dom: 'Bfrtip',
        rowId : 'id',
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor },
            'print'
        ],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {data: "location", name: "location", bSearchable: true, bSortable: true},
            {data: "campaign", name: "campaign", bSearchable: true},
            {data: "educator", name: "educator", bSearchable: true},
            {data: "f_name", name: "f_name", bSearchable: true},
            {data: "l_name", name: "l_name", bSearchable: true},
            {data: "phonenumber", name: "phonenumber", bSearchable: true},
            {data: "potentialapt", name: "potentialapt", bSearchable: true},
            {data: "requestdate", name: "requestdate", bSearchable: true},
            {data: "requesttime", name: "requesttime", bSearchable: true}
        ],
        footerCallback: function (row, data, start, end, display) {
            var api = this.api();
            var info = api.page.info();
            // Update footer
            $(api.column(9).footer()).html(
                '' + info.recordsTotal
            );
        }
    });
});

lovedhaka

I got the answer. I was missing
select: true
in my datatable

Thanks..
Love Dhaka