TypeError: originalData[key] is undefined on Editing
TypeError: originalData[key] is undefined on Editing
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;
});
This discussion has been closed.
Answers
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 thanrow.add()to do that. Then the row would exist and it could be edited.Allan