TypeError: originalData[key] is undefined on Editing

davichano

When I change the value of the input I get the error (see the picture).
First I add a empty row, then I want edit each cell using the "Enter" key.

$(document).ready(function () {
    rows = 0;
    editor = new $.fn.dataTable.Editor({
        table: "#example",
        "idSrc": "idProduct",
        fields: [
            {
                label: "Producto:",
                name: "idProduct"
            },
            {
                label: "Nombre:",
                name: "name",
            },
            {
                label: "Cantidad:",
                name: "quantity"
            },
            {
                label: "Precio:",
                name: "price"
            }
        ]
    });

    $('#example').on('click', 'tbody td:not(:last-child)', function (e) {
        selected = table.cell(this).index();
        table.cells(selected.row, selected.column).edit();
    });
    table = $('#example').DataTable({
        keys: true,
        columns: [
            {
                data: "idProduct",
                orderable: false
            },
            {data: "name"},
            {data: "quantity"},
            {data: "price"},
            {
                data: null, render: function (data, type, row) {
                return data.quantity * data.price;
            }
            },
        ],
        searching: false,
        paging: false,
        info: false,
        select: {
            style: 'os',
            selector: 'td:first-child'
        }
    });
    editor.on('close', function (e) {
            if (key == 13) {
                console.log(JSON.stringify(editor.get()));
                if (selected.column < columns) {
                    selected.column++;
                    table.cells(selected.row, selected.column).edit();
                } else {
                    if (selected.row == rows) {
                        rows++;
                        addRow();
                    }
                    selected.row++;
                    selected = table.cell({row: selected.row, column: 0}).index();
                    table.cells(selected.row, selected.column).edit();
                }
            }
        }
    );

});

function addRow() {
    table.row.add({
        'idProduct': "",
        'name': "",
        'quantity': "",
        'price': ""
    }).draw();
}

$(document).on('keyup', function (e) {
    key = e.keyCode;
});

allan

First I add a empty row, then I want edit each cell using the "Enter" key.

That's not a valid interaction in Editor, which is why none of the examples show that. For a row to be edited inline, it must already exist on the database. You could use create() rather than row.add() to do that. Then the row would exist and it could be edited.

Allan