Datatable field type now getting list data
Datatable field type now getting list data
Debugger code: opovob
I am trying to load a 'datatable' field type within the editor window of my main datatable, i am passing the data for the nested table as as list that is loaded in the ajax call for the main table, the ajax call is to a SQL statement that returns a JSON object.
I have looked through loads of examples and test pages for similar ideas all done with a php request that look to be working fairly simply but i cannot get my table to populate, any help with this would be greatly appreciated.
i have checked the console log for the data that the main ajax call returns and the fileld for LINES is populated as an Array with the correct data.
Relevant Code:
function buildDataTable() {
// Build Enquiry Prices datatable
var objEnq = {};
var detailRows = [];
objEnq.CompanyGuid = '@Model.CompanyGuid';
objEnq.EnquiryNo = '@Model.EnquiryNo';
// Build editor form
editor = new $.fn.dataTable.Editor({
ajax: {
url: "/Enquiry/GetEnquiryLines",
type: "POST",
dataSrc: "",
data: objEnq,
},
table: "#dtEnquiryLines",
idSrc: 'LineNo',
formOptions: {
main: {
focus: 4
}
},
template: '#customForm',
fields: [
{
label: "Line No",
name: "LineNo",
type: "readonly"
},
{
label: "Part No",
name: "PartNo",
type: "readonly"
},
{
label: "Description",
name: "Description",
type: "textarea",
attr: {
readonly: "readonly"
}
},
{
label: "Customer Part No",
name: "PartCustomerNo",
type: "readonly"
},
{
label: "Rev",
name: "LineRev",
type: "readonly"
},
{
label: "UOM",
name: "UOM",
type: "readonly"
},
{
label: "Line Note",
name: "LineNote",
type: "textarea",
attr: {
readonly: "readonly"
}
},
{
name: "Lines",
type: "datatable",
config: {
columns: [
{ title: 'Quantity', data: "Quantity" },
{ title: 'Net Price', data: "NetFC" },
],
}
}
],
});
// Get number of Decimal places for table
var dp_Unit = 2;
var dp_Qty = 2;
dp_Unit = @Session("DP_UnitPrice");
dp_Qty = @Session("DP_Qty");
$.ajax({
url: "/Enquiry/GetEnquiryLines",
type: "POST",
dataSrc: "",
data: objEnq,
success: function (data) {
console.log(data)
if (data.success !== false) {
table = $("#dtEnquiryLines").DataTable({
destroy: true,
data: data,
"scrollX": true,
scrollY: '35vh',
"bInfo": false,
scrollCollapse: true,
pageResize: true,
paging: false,
fixedColumns: { left: 1 },
dom: '<"top">rt<"bottom"B><"clear">',
columns: [
{ data: "LineNo", title: "Item", className: "text-center", searchable: true, width: "50px" },
{ data: "PartNo", title: "Part No", searchable: true },
{ data: "PartCustomerNo", title: "Cust Part No", searchable: true },
{
data: "Description", title: "Description", render: DataTable.render.ellipsis(25),
createdCell: function (td, cellData) {
$(td).on('click', function () {
Swal.fire({
title: 'Description',
showClass: {
popup: ` animate__animated animate__fadeInUp animate__faster `
},
hideClass: {
popup: ` animate__animated animate__fadeOutDown animate__faster `
},
text: cellData,
confirmButtonText: 'Close',
confirmButtonColor: 'dodgerblue'
});
});
$(td).css('cursor', 'pointer');
}
},
{ data: "LineRev", title: "Rev", className: "text-left", width: "80px" },
{ data: "StatusDesc", title: "Status", className: "dt-head-center dt-body-center", width: "110px", },
{ data: "UOM", title: "UOM", className: "text-left", width: "80px" },
{ class: 'dt-control', width: "30px", orderable: false, data: null, defaultContent: '', },
{ data: "StatusDesc", title: "Status", className: "dt-head-center dt-body-center", visible: false },
{ data: "Lines", title: "Lines", className: "dt-head-center dt-body-center", visible: false },
],
select: { style: 'single', selector: 'td:first-child' },
buttons: [
{
text: "Back",
className: 'embossButton',
action: function () {
var showComplete = '@ViewBag.showComplete';
window.location.href = '/SalesOrder/GetSalesOrders?&bComplete=' + showComplete;
}
},
{
extend: "edit",
text: "View",
className: 'embossButton',
editor: editor,
formButtons: [{ text: 'Close', action: function () { this.close(); }, className: 'embossButton' }]
}
],
rowCallback: function (row, data) {
var dtStatus = data.StatusDesc;
if (dtStatus == "Complete") {
$('td', row).eq(4).css('color', 'blue').css('fontWeight', 'bold');
}
if (dtStatus == "Cancelled") {
$('td', row).css('color', 'red').css('fontWeight', 'bold');
$('td', row).css('text-decoration', 'line-through');
$('td', row).css('cursor', 'pointer');
$('td', row).eq(0).css('text-decoration', 'underline line-through');
}
var dtLineNote = data.LineNote;
if (dtLineNote == "") {
$('td', row).eq(7).removeClass('dt-control');
};
},
});
table.on('draw', function () {
table.columns.adjust();
});
// Open the editor and set objEnqLine data
editor.on('open', function () {
editor.title('Details');
$('#customForm').removeClass('invisible');
$('#customForm *').attr("disabled", true);
});
// Log the data for the "Lines" field when the data is loaded into the editor
editor.on('preSubmit', function (e, data) {
console.log("Editor 'Lines' field data before submit:", data);
});
// Log the "Lines" data when a row is selected
table.on('select', function (e, dt, type, indexes) {
var rowData = table.row(indexes).data();
console.log("Selected row data:", rowData);
console.log("Lines Data from selected row:", rowData.Lines);
});
}
else {
Swal.fire({
title: 'Failed to load!',
text: 'Error report will be sent to Portal Support',
icon: 'warning',
confirmButtonText: 'Return',
confirmButtonColor: 'red'
}).then(function () {
console.log(data);
window.location.href = '/CustomerDashboard/Dashboard';
});
}
}
});
} // End buildDataTable
Replies
Rather than making the Ajax call with
$.ajax- just let DataTables do it for you:The reason that the DataTable field isn't populating with options is that Editor listens for DataTables' Ajax request. It isn't making one in your code above. Check it to have the DataTable make the request and it should then work as expected.
If for whatever reason you don't want to do that, use
field().update()to update the options from the JSON data in yoursuccessfunction.Allan
Hi Allan, thank you for the response.
Please forgive me, i do not follow what you mean, i have 2 AJAX calls...i added the one at the creation of the editor instance as i thought this may have been a solution to the issue. it is then repeated when i initialise the data table.
Is the issue that i call AJAX and then if there data is returned successfully i then build the datatable? I had done it this way so that the table was not created if the data did not return successfully.
The other fields in the editor populate fine, it is just the data i am trying to load in the nested table.
I tried this revised version, but the nested table is not populated in the editor window
function buildDataTable() {
var objEnq = {};
objEnq.CompanyGuid = '@Model.CompanyGuid';
objEnq.EnquiryNo = '@Model.EnquiryNo';
} // End buildDataTable
With that new version, can you upload a trace to the debugger for me please? Or even better would be a link to a page showing the issue!
Allan
Hi Allan,
i re-ran the debugger on this new version code - idevum (I think this is what u were after)
The page showing the issue is not currently a live version of the project so i dont think i would be able to link you to it unfortunately.
Please let me know if that is the correct trace for the debugger
Yes, I can see the data that is being retrieved from the server now - thank you.
I should perhaps have realised what the problem is from the
dataSrc: "",- that means that you are returning an array of data for display in the DataTable.However, if you want a
datatablefield type to display a list of options based on the Ajax return, you need to include the options in the JSON return - thus it must return an object.E.g. have a look at this example and you'll see this as the response:
At the moment you don't have the list of options for the
datatablefield being conveyed.If you can't modify the server-side JSON response to include the list of options, you would need to make an Ajax call to get the list of options (assuming you need to get them from a DB rather than just a static list) and use
field().update()to populate them.Allan
Hi Allan,
I was able to populate the table by adding this function. Thank you for your help.
Just as a secondary question, is it possible to have the datatable use the full width of the editor window as you would with the class 'full block' on a text field.
I have tried this but it did not seem to have any effect on the table.
Are you using one of the styling integrations such as Bootstrap? If so, which one?
Allan
yeah, I have bootstrap 5 installed.
Typo. It should be:
Had me confused for a moment when I tested it and it was working here..!
Allan
yeah that is it, perfect....thank you