DataTable.render.select is not a function...and inline editing not working

martinconnollybart

Trying to replicate the simple inline editing example (https://editor.datatables.net/examples/inline-editing/simple.html) with my own application. But I just get this error on loading, no select checkbox is shown, and nothing happens when I click in a table cell. I must be missing something somewhere! NB this is with DataTables 1.13 and Select 1.7.0, JS and CSS files generated to include Select etc. Any help welcome. Thanks.

jQuery.Deferred exception: DataTable.render.select is not a function

Here is my JS:

 var appeditor = new DataTable.Editor({
            ajax: "php/table.TApplicationsSpreadsheet.php",
            fields: [
                {"label": "id", "name":"id"},
               ..... more columns
            ], table: "#sheet"
        });

 var spreadsheetTable = new DataTable('#sheet', {
            ajax: 'php/table.TApplicationsSpreadsheet.php',
            columns: [
               { "data": 
               null,orderable: false,
               render: DataTable.render.select()},

                {
                    "data": "id", "label":"ID"
                }

             ... more columns.....
            ],
            layout: {
                topStart: {
                    buttons: [
                        { extend: 'create', editor: appeditor },
                        { extend: 'edit', editor: appeditor },
                        { extend: 'remove', editor: appeditor }
                    ]
                }
            },
            scrollY: "500px",
            "paging": false,
            "autoWidth": false,
            order: [[1, 'asc']],
            select: {
                style: 'os',
                selector: 'td:first-child'
            }
            }
        );

        // Activate an inline edit on click of a table cell
        $('#sheet').on('click', 'tbody td:not(:first-child)', function (e) {
            appeditor.inline(this);
        });

HTML:

<div class="container" style="width:90%; padding-left: 70px">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="sheet" >
                <thead>
                    <tr>


                        <th></th>
                        <th>ID</th>
                        ...more columns...

                    </tr>
                </thead>
    </table>
</div>

CSS and JS imports:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jq-3.7.0/moment-2.29.4/dt-1.13.8/b-2.4.2/date-1.5.1/sl-1.7.0/datatables.min.css">

        <link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/table.css">


        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs/jq-3.7.0/moment-2.29.4/dt-1.13.8/b-2.4.2/date-1.5.1/sl-1.7.0/datatables.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.min.js"></script>



        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/editor.mask.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.TApplicationsSpreadsheet.js"></script>

allan

DataTable.render.select was introduced in Select 2, which requires DataTables 2 or newer.

For a checkbox with Select 1 and DataTables 1.x, see this example.

With that fixed, hopefully the inline editing will spring into action.

Allan

martinconnollybart

Ah, OK, I now have a checkbox that works in the first column, but it shows [object Object] too, and when I click another cell I get

Unable to automatically determine field from source. Please specify the field name.

Doesn't the "this" establish which field is to be used?
Thanks

kthorngren

but it shows [object Object] too

Its probably due to the columns.data definition for that column. Please post your current config for the checkbox column.

See if the technote link helps you resolve the issue.:
https://datatables.net/manual/tech-notes/11

If not please post the full Editor fields and Datatable columns config. Also tell us which column or columns have the error.

Kevin

martinconnollybart

Here's my column config (as per the V1 compatibility example, I hope)

var spreadsheetTable = new DataTable('#sheet', {
            ajax: 'php/table.TApplicationsSpreadsheet.php',
            columns: [
               {
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                },
                {
                    "data": "id", "label":"ID"
                }{
                    "data": "id", "label":"ID"
                },
                {
                    "data":"fundname", "label":"Fund Name"
                },
                {
                    "data": "prompt"
                },
                {
                    "data": "submitted",
                    "type": "datetime"
                },
                {
                    "data": "purpose"
                },
                {
                    "data": "appprogress"
                },
                {
                    "data": "reqy1", render: DataTable.render.number(null, null, 2, '£')
                },
                {
                    "data": "reqy2", render: DataTable.render.number(null, null, 2, '£')
                },
                {
                    "data": "reqy3", render: DataTable.render.number(null, null, 2, '£')
                },
                {
                    "data": "reqy4", render: DataTable.render.number(null, null, 2, '£')
                },
                {
                    "data": "reqy5", render: DataTable.render.number(null, null, 2, '£')
                }
            ],
            layout: {
                topStart: {
                    buttons: [
                        { extend: 'create', editor: appeditor },
                        { extend: 'edit', editor: appeditor },
                        { extend: 'remove', editor: appeditor }
                    ]
                }
            },
            scrollY: "500px",
            "paging": false,
            "autoWidth": true,
 select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]

        });

and the editor fields:

var appeditor = new DataTable.Editor({
            ajax: "php/table.TApplicationsSpreadsheet.php",
            fields: [
                {"label": "id", "name":"id"},
                {"label": "fundname", "name":"Fund Name"},
                {"label": "prompt", "name":"Prompt"},
                {"label": "submitted", "name":"Submitted"},
                {"label": "purpose", "name":"Purpose"},
                {"label": "appprogress", "name":"Progress"},
                {"label": "reqy1", "name":"Req Y1"},
                {"label": "reqy2", "name":"Req Y2"},
                {"label": "reqy3", "name":"Req Y3"},
                {"label": "reqy4", "name":"Req Y4"},
                {"label": "reqy5", "name":"Req Y5"},
            ], table: "#sheet"
        });

Clicking in any cell triggers the error (apart from the first column). This is the code snippet:

 // Activate an inline edit on click of a table cell
        $('#sheet').on('click', 'tbody td:not(:first-child)', function (e) {
            appeditor.inline(this);
        });

allan

layout is not available in DataTables 1.x. That is a DT2 property.

You need to use something like dom: 'Bfrtip' if you want the buttons to appear.

{"label": "fundname", "name":"Fund Name"},

Looks like label and name are the wrong way round. You presumably what what the users sees to be "Fund Name" - try reversing the values.

Allan

martinconnollybart

too long a day yesterday...inline and checkbox both working, now I have the tn/4 error again. I'll figure that out. Thanks Allan!