Newbie Editor not editing misery

Newbie Editor not editing misery

toomanyloginstoomanylogins Posts: 5Questions: 2Answers: 0
edited May 23 in Editor

I am familiar with data tables but not with the editor. I want to edit a single cell in a row. I have followed the example in the manual.
https://editor.datatables.net/examples/inline-editing/columns.html
But when I click on the cell the debugger is fired but I cannot edit. I would be grateful if somebody could put me out of my misery. Here is my code.

const editor = new DataTable.Editor({
            ajax: '/admin/sale-invoice-datatable?',
            fields: [
                {
                    label: 'Total Allocated:',
                    name: 'allocatedAmount'
                }
            ],
            table: '#invoiceTable'
        });
            table.columns(9).search('').columns(10).search('').columns(1).search(companyID).columns(4).search('SINV').columns(12).search(status).draw();
        });

        const table = ltgObj('invoiceTable').DataTable({
            initComplete: function () {
                $('#invoiceTable_filter').addClass('d-none');

                const companyID = ltgObj('sale.companyID').val();
                const status = 'Posted';

                table.columns(9).search('').columns(10).search('').columns(1).search(companyID).columns(4).search('SINV').columns(12).search(status).draw();
            },

            ajax: {
                url: '/admin/sale-invoice-datatable?', // DEFAULT ON LOAD FOR EDIT NULL IF NEW

                data: function (data) {
                    // META DATA...

                    // !IMPORTANT: SPECIFY TYPE FOR EACH COLUMN FOR SERVER-SIDE QUERIES

                    data.columnsMeta = [
                        { type: 'text' }, // ID
                        { type: 'text' }, //companyID
                        { type: 'text' }, //select
                        { type: 'text' }, // DATE
                        { type: 'text' }, // TYPE
                        { type: 'number' }, // NO
                        { type: 'text' }, // REF
                        { type: 'number' }, // TOTAL
                        { type: 'number' }, // ALLOCATED
                        { type: 'number' }, // DUE
                        { type: 'number' }, // TAX
                        { type: 'text' }, // TAXCDOE
                        { type: 'text' } // STATUS
                    ];
                }
            },
            serverSide: true,
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            columnDefs: [
                {
                    targets: [0],
                    name: 'ID',
                    visible: false
                },
                {
                    targets: [1],
                    name: 'companyID',
                    visible: false
                },
                {
                    targets: [2],
                    //    data: null,
                    defaultContent: '',
                    visible: true
                },
                {
                    targets: [3],
                    name: 'taxDate',
                    className: '',
                    visible: true
                },
                {
                    targets: [4],
                    name: 'transactionType',

                },
                {
                    targets: [5], 
                    name: 'transactionNo',
                },
                {
                    targets: [6],
                    name: 'reference'
                },
                {
                    targets: [7],
                    name: 'totalAmount'
                },
                {
                    targets: [8],
                    name: 'totalDue',
                    className: 'text-center',
                    ///     searchable: true,
                    visible: true
                },
                {
                    targets: [9],
                    name: 'parentAllocationAmount',
                    className: 'text-center',
                    visible: true
                },
                {
                    targets: [10],
                    name: 'allocatedAmount',
                    className: 'text-center',
                    visible: true
                },
                {
                    targets: [11],
                    name: 'taxAmount',
                    className: 'text-center',
                    visible: true
                },
                {
                    targets: [12],
                    name: 'status',
                    className: 'text-center',
                    visible: false
                }
            ],
            language: {
                lengthMenu: 'Show _MENU_  &nbsp'
            },
            order: [[2, 'asc']],
            responsive: true,
            pageLength: 5,
            paging: true


        });

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

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    You only have one field defined. A click on every other column should trigger this error. Clicking on column index 10 should trigger inline editing though.

    Allan

  • toomanyloginstoomanylogins Posts: 5Questions: 2Answers: 0

    Thanks for reply. I do get that error but onclick on col 10 it does not edit. That is the problem. Also tried this code to just allow click on col 10

    table.on('click', 'tbody td:(:nth-child(10))', function (e) { editor.inline(this); });;

    In inspector nothing appears to be attached to the elements. Is that correct

    I am using this version

    /*
    * This combined file was created by the DataTables downloader builder:
    * https://datatables.net/download
    *
    * To rebuild or modify this file with the latest versions of the included
    * software please visit:
    * https://datatables.net/download/#bs5/dt-2.0.5/e-2.3.2/r-3.0.2/sl-2.0.1
    *
    * Included libraries:
    * DataTables 2.0.5, Editor 2.3.2, Responsive 3.0.2, Select 2.0.1
    */

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    No that is not correct. If you link to the page I'll take a look and debug it.

    Allan

  • toomanyloginstoomanylogins Posts: 5Questions: 2Answers: 0

    Thanks Allan I will setup a tunnel tomorrow if that ok.

Sign In or Register to comment.