Datatable Editor Form not taking Current data

joywrk15

Hello all,

I am working on a page that uses a datatable.
I have 2 dropdown lists. DDL 2 is populated based on the value from DDL1. The CRUD operation is working smooth. The only issue is - when i am selecting a row and editing it, one edit modal pops up. On that Edit Modal the DDL2 should have been "Selected" with the value from the ROW but it is taking the default list assigned to it. DDL1 however is populating with its respective value from the ROW.

I was thinking if I can resolve it using "dependant()" concept but i am trying several other things to resolve it as well.
I am unable to create a link as this is chunk from a big page and office work.

But here is the code -

$(document).ready(function () {
var columnSet = [
{
title: "Id",
id: "Id",
data: "id",
type: "text",
placeholderMsg: "Id from database",
"visible": false,
"searchable": false,
type: "readonly"
},
{
title: "Name", // THIS IS DDL1
id: "Name",
data: "name",
type: "select",
"options": nameList, ( populated from AJAX data)
render: function (data, type, full, meta) {
if(data == null){
return "";
}
else{
return (data.toString());
}
}
},
{
title: "Metrics", // DDL2
id: "Metrics",
data: "metrics",
type: "select",
"options": metricList,
render: function (data, type, full, meta) {
if (data == null) {
return "";
}
else {
return (data.toString());
}
}
},
];
var myTable = $('#dt-basic-example').dataTable({
dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
ajax:"/Page?handler=handler",
columns: columnSet,
select: 'single',
altEditor: true,
"pageLength": 50,
responsive: true,
buttons: [
{
extend: 'selected',
text: '<i class="fal fa-times mr-1"></i> Delete',
name: 'delete',
className: 'btn-primary btn-sm mr-1'
},
{
extend: 'selected',
text: '<i class="fal fa-edit mr-1"></i> Edit',
name: 'edit',
className: 'btn-primary btn-sm mr-1 cust-edit'
},
{
text: '<i class="fal fa-plus mr-1"></i> Add',
name: 'add',
className: 'btn-success btn-sm mr-1'
},
{
text: '<i class="fal fa-sync mr-1"></i> Refresh',
name: 'refresh',
className: 'btn-primary btn-sm'
},
],
onAddRow: function (dt, rowdata, success, error) {
var result = PostRow('Page', 'Addhandler', rowdata, success, error);
success(JSON.stringify(rowdata));
error: error;
},
onEditRow: function (dt, rowdata, success, error) {
var result = PostRow('Page', 'Edithandler', rowdata}, success, error);
success(rowdata);
error: error;
},
onDeleteRow: function (dt, rowdata, success, error) {
var result = GetRow('Page', 'Delethandler', { id: rowdata.id }, success, error);
success(rowdata);
error: error;
},
});
$(document).on("change", "#nameDDL", function () {
var methodName = 'MetricName';
$.ajax({
url: '/Page?handler=' + methodName + '',
type: 'GET',
dataType: 'json',
data: { 'name': $("#nameDDL").val() },
success: function (data) {
var metrics = data;
var opts = '';
$.each(metrics, function (key, value) {
opts += '<option value="' + value + '">' + value + '</option>';
});
$("#metricDDL").html(opts);
},
error: function (response) {
}
});
});
});

allan

onAddRow, onEditRow and onDeleteRow aren't options I recognise in DataTables. You presumably aren't using our Editor software? If you are using some other CRUD library, you'd need to ask for support from the author(s) of that library.

Allan