Data Table is not editable: Uncaught Unable to automatically determine field from source.

djustus

Im having trouble implementing the inline editing, as well as normal editing.
The edit button, and the delete does not bring up anything, however the New does.

Whenever i click on a value in the table to edit, the console prints "media.nl?id=4317783&c=173762&h=598e5da…&_xt=.js:312 Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to.."

Whenever i click the edit button after selecting a row, the console prints "Uncaught Unable to find row identifier For more information, please refer to.."

Some context, my columns are defined dynamically depending on the type of record it is showing, the column names are not statically defined in the html or JS, however ive hardcoded the columns under the editor because i found no other way to do it.
If there is another way , please let me know.

/***
 * Client side script to process Datatable for Payment Schedule
 * main is created with possibility of exposing functions but nothing is exposed right now except round
 * @context : pSchedule
 */
; //in case of namespace pollution, close any open client side script.


//global editor variable
var editor;

var mainSsu = 'https://system.sandbox.netsuite.com/app/site/hosting/scriptlet.nl?script=808&deploy=1&compid=173762&columns=';
$(document).ready(function() {
    //  var suiteletTable = $('#ps_mainsuitelet').DataTable();
    var recordId = $('#recordid').val();
    var recordType = $('#recordtype').val();
    var columns = $('#columns').val();
    console.log(columns);
    var columnslabels = $('#columnlabels').val();
    console.log(recordId + ' ' + recordType + ' ' + columnslabels);
    var headers = '';
    columnHeadersArray = columnslabels.split(',');

    $('#ps_mainsuitelet thead tr').append('<th>LineId</th>');
    for (var i = 0; i < columnHeadersArray.length; i++) {
        $('#ps_mainsuitelet thead tr').append('<th>' + columnHeadersArray[i] + '</th>');
    }

// Sales order Editor 
    if(recordType == "salesorder")
    {

        editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  '../php/rest/create.php'
            },
            edit: {
                type: 'PUT',
                url:  '../php/rest/edit.php?id=_id_'
            },
            remove: {
                type: 'DELETE',
                url:  '../php/rest/remove.php?id=_id_'
            }
        },
        table: '#ps_mainsuitelet',
        fields: [
        { label: 'Do Not Print', name: 'custcol_dont_print_line_item' },
        { label: 'Line',  name: 'line'  },
        { label: 'Mfg Code',  name: 'custcol_mfgcode'  },
        { label: 'PO Vendor',  name: 'custcol_povendor_fs'  },
        { label: 'Qty',  name: 'quantity'  },
        { label: 'Fulfilled',  name: 'quantityfulfilled'  },
        { label: 'Invoiced',  name: 'quantitybilled'  },
        { label: 'Item',  name: 'item'  },
        { label: 'Item/Description',  name: 'custcol_itemdescription'  },
        { label: 'Description',  name: 'description'  },
        { label: 'Option Codes',  name: 'custcol_optioncodes'  },
        { label: 'Inventory Detail',  name: 'inventorydetail'  },
        { label: 'List Price',  name: 'custcol_listprice'  },
        { label: 'Dealer Discount',  name: 'custcol_dealerdiscount'  },
        { label: 'Unit Cost',  name: 'custcol_unitdealer'  },
        { label: 'Customer Discount',  name: 'custcol_customerdiscount'  },
        { label: 'Gross Profit',  name: 'custcol_grossprofit'  },
        { label: 'G/P %',  name: 'custcol_gppercent'  },
        { label: 'Tax Code',  name: 'taxcode'  },
        { label: 'Tax Rate',  name: 'taxrate1'  },
        { label: 'Ship-To Address',  name: 'shipaddress'  },
        { label: 'Create PO',  name: 'createdpo'  },
        { label: 'Tag 1',  name: 'custcol_tagone'  },
        { label: 'Tag 2',  name: 'custcol_tagtwo'  },
        { label: 'Mnfg Acknowledgment',  name: 'custcol_mnfg_acknowledgment'  },
        { label: 'PO Number',  name: 'custcol_ponumber'  },
        { label: 'Do Not Bill', name: 'custcol_donotbill' },
        { label: 'Related Expense Report',  name: 'custcol_related_expense_report'  },
        { label: 'PO Info',  name: 'custcol_po_info'  }
        ]


        });

    }



    

    // Activate an inline edit on click of a table cell
    $('#ps_mainsuitelet').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            buttons: { label: '&gt;', fn: function () { this.submit(); } }
        } );
    } );


    //  var url = mainSsu + '&recordInternalId=' + recordId + '&recordType=' + recordType + '&actiontype=setValues';
    jQuery.get(mainSsu + encodeURIComponent(columns) + '&recordInternalId=' + recordId + '&recordType=' + recordType, {
        actiontype : 'setValues'
    }).done(function(data) {
        console.log(data);
        createMainDataTable(data);

    });




    
    var mainSuiteletTable;
    function createMainDataTable(data) {
        mainSuiteletTable = $('#ps_mainsuitelet').DataTable({
            data : JSON.parse(data),
            dom: 'Bfrtip',
            buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
            ],

            fixedHeader : {
                header : true
            },
            paging : false,

            select : {
                style : 'os',
                selector : 'td:first-child'
            },
            columnDefs : [{
                className : 'select-checkbox',
                targets : 0

            },  
            {
                className : 'select-checkbox',
                targets : [1],
                visible : false,
                searchable : false
            }] 
            
        });
    }

    var selected = [];
    $('#checkboxes input:checked').each(function() {
        selected.push($(this).attr('name'));
    });

    
    $('#delete_button').click(function() {
        console.log('clicked button');
        var ids = $.map(mainSuiteletTable.rows('.selected').data(), function(item) {
            return item[1];
        });
        console.log(ids);
        var ids_string = ids.toString();
        //      var ids_to_send = jQuery.serialize(ids);
        jQuery.ajax({
            type : "POST",
            url : mainSsu + '&recordInternalId=' + recordId + '&recordType=' + recordType,
            data : {
                actiontype : 'delete',
                lineIds : ids_string
            },
            success : function(result) {
                console.log('draw');
                mainSuiteletTable.ajax.reload();
                //              mainSuiteletTable.draw(); // redrawing datatable
            }
        });
    });

});

allan

Hi,

Sounds like a combination of factors:

Whenever i click the edit button after selecting a row, the console prints "Uncaught Unable to find row identifier For more information, please refer to.."

This means that Editor can't find the unique row identifier for the row (i.e. normally the primary key). That is used to tell the server what row to edit or delete. If that information isn't available, it will throw the error you are seeing.

Editor has an idSrc option which can be used to tell Editor where to get the row id from if it isn't in the default location of DT_RowId. An example of that can be seen here.

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to.."

This one means that Editor can't map between the data field shown in the DataTable and the field to edit in the form. For example, if you click on a cell in the Line column, Editor is looking for a field called line. But there doesn't appear to be one in the table by that name. Rather it looks like the table is being populated with arrays rather than objects.

That discrepancy is what is causing this issue.

I would suggest using either objects or arrays consistently to avoid this issue. I'd also suggest using objects over arrays since its easier to remember parameter names rather than array indexes.

Further information about object based table is available in the manual.

Regards,
Allan