I'm having trouble searching the forums for a similar issue. I feel like this would be more common than I'm finding.
But I have a row of data, and based on a bool, I'm popping up an editor on click to edit some unrelated data. This works, however, after I submit, Editor/Datatables attempts to redraw the row with the data coming back from from the unrelated Editor. I get the row mismatch error obviously. I have a super simple .NET Editor for /ComponentEditors/Approval/Editor
Preferably, I'd like it to only refresh the ONE column that I trigger the editor off of... or prevent the row updated entirely at the very least.
Editor
const editor = new DataTable.Editor({
ajax: '/ComponentEditors/Approval/Editor',
idSrc: 'id',
fields: [
{
label: 'Approval Date:',
name: 'ApproveDate',
type: 'datetime',
keyInput: false
},
{
label: 'Approval Comment:',
name: 'ApprovalComments'
}
],
table: '#ProjectsDatatable'
});
Datatable
const datatable = new DataTable("#ProjectsDatatable", {
ajax : {
url: "/Projects/GetProjects",
type: "GET",
dataType: "JSON"
},
idSrc: 'id',
columns: [
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: '',
},
{
data: "id",
title: "ProjectId",
searchable: false,
visible: false
},
{
data: "approveDate",
orderable: false,
render :function (data, type, row, meta) {
if(type === 'display'){
if(data !== null) {
let date = new Date(data);
return '<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" ' +
'data-bs-title="'+ date.toLocaleDateString() +' '+ date.toLocaleTimeString() +'" data-bs-content="'+row.approvalComments+'">' +
'<i class="bi bi-check-circle-fill"></i>' +
'</span>';
} else {
return '<span class="d-inline-block editor-edit"><button><i class="bi bi-circle"></i></button></span>';
}
}else{
//we are just checking for true or false
return data !== null;
}
},
searchable: true
},
...a bunch more columns
On click method
datatable.on('click', 'span.editor-edit button', function (e) {
editor.edit(e.target.closest('tr'), {
title: 'Approve Project',
buttons: [
{
text: 'Cancel',
action: function () {
this.close();
}
},
'Update'
]
});
});