In line edit not working datatables editor
In line edit not working datatables editor
nfite
Posts: 10Questions: 2Answers: 0
We are using editor - data tables and recently upgraded from 1.10.15 to version 1.10.16
In line edit is currently not functioning properly
When editing a field we are required to refresh the page to see the inline edit take place
Also when copying a field down where there are multiple rows the drag and drop copy feature is only working for one row (the nearest below the copy) and no other rows
Please see the CDN's below to know what we are using for our build Also below is our datatables client side code in case it is needed. I can also provide the editor code if needed
The edit button functionallity and the edtior form is working. Our problem currently is that in line edit is not saving the edit, unless the browser is refreshed and also as stated above with the copy functionallity.
Please help or let us know how to proceed.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/af-2.2.0/b-1.3.1/b-flash-1.3.1/fc-3.2.2/fh-3.1.2/kt-2.2.1/se-1.2.2/datatables.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/af-2.2.0/b-1.3.1/b-flash-1.3.1/fc-3.2.2/fh-3.1.2/kt-2.2.1/se-1.2.2/datatables.js"></script>
var editor;
$(document).ready(function () {
//get projectid from url query string
var queryString = window.location.search.substr(1);
arrQueryString = queryString.split('=');
//make every item in array lowercase
for (var i in arrQueryString) {
arrQueryString[i] = arrQueryString[i].toLowerCase();
}
//try to find projectid key in array
var projectid;
if (arrQueryString.indexOf('projectid') > -1) {
//value of projectid will be the item after the index of projectid key
projectid = arrQueryString[arrQueryString.indexOf('projectid') + 1];
//console.log(projectid);
}
else
{
projectid = $("#hidProjectID").val();
}
var date = new Date().toISOString().slice(0, 19).replace('T', ' ');
var apiendpoint = '<%=System.Web.Configuration.WebConfigurationManager.AppSettings("apiendpoint").ToLower() %>';
editor = new $.fn.dataTable.Editor({
//ajax: "https://www.fisherdesign.com/8pointapipublish2/api/projectitem/" + projectid,
//ajax: "http://localhost:49942/api/projectitem/" + projectid,
ajax: apiendpoint + projectid,
table: "#tblItem",
fields: [
{
label: " Name:",
name: "Item.Name"
},
{
label: "Main Description:",
name: "Item.Description",
className: 'entryReq'
},
{
label: "Second Description:",
name: "Item.Description2"
},
{
label: "Model:",
name: "Item.ModelNumber",
type: "readonly"
},
{
label: "SKU:",
name: "Item.SKU",
type: "readonly"
},
{
label: "UPC:",
name: "Item.UPC",
type: "readonly"
},
{
label: "Unit of Measure:",
name: "Item.UOM",
type: "select",
placeholder: "Select UOM",
className: 'entryReq'
},
]
});
var itemDT = $('#tblItem').DataTable({
dom: "Bfrtip",
"bPaginate": false,
//ajax: "https://www.fisherdesign.com/8pointapipublish2/api/projectitem/" + projectid,
//ajax: "http://localhost:49942/api/projectitem/" + projectid,
ajax: apiendpoint + projectid,
columns: [
{
data: "Item.Name",
defaultContent: "<i>Empty</i>"
},
{ data: "Item.Description" },
{ data: "Item.Description2"},
{ data: "Item.ModelNumber" },
{ data: "Item.SKU" },
{ data: "Item.UPC" },
{
data: "UOM.Name", editField: "Item.UOM"
},
],
initComplete: function (settings, json) {
checkdata(json, arr_required);
},
keys: {
editor: editor
},
autoFill: {
editor: editor
},
select: {
style: 'os',
blurable: true
},
scrollX: true,
width: "950px",
buttons: [
{ extend: "edit", editor: editor },
]
});
//Fix to known editor chrome issue of update button hiding until tabbed.
editor.on('open', function () {
$('div.DTE_Footer').css('text-indent', -1);
});
//handler on successful submission of editor form (create, edit, delete)
editor
.on('onSubmitSuccess', function (e, json, data)
{
console.log("sucess!");
//refresh datatable
itemDT.ajax.reload();
//if create or delete
console.dir(e);
if (e.currentTarget.dom.buttons.innerText == "Create" || e.currentTarget.dom.buttons.innerText == "Delete") {
console.log("successfully created new item!");
//if first item added, or no more items (after delete), then reload page
var intRowsCount = document.getElementById("tblItem").rows.length;
if (intRowsCount == 2 || intRowsCount == 1) {
location.reload();
}
}
})
.on('open', function (e, mode, action) {
if (mode === 'main') {
itemDT.keys.disable();
}
})
.on('close', function () {
itemDT.keys.enable();
})
.on('postEdit', function (e, json, data) {
checkdata(json, arr_required);
});
// checkdata(json);
});
This question has accepted answers - jump to:
Answers
I might be missing it but I don't see where you are activating inline editing.
Have you verified the proper data is being returned from the server when inline editing?
Can you post a link to your page or build a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Yep, as Kevin said,
inline()appears to be missing from your code. This example here shows how it should be done, so hopefully that'll get you going,Cheers,
Colin
this was resolved thank you for your input, wound up being a server side error that i found through debugging, thanks for your feedback and responses