Editor instance in child table
Editor instance in child table
Khalid Teli
Posts: 251Questions: 71Answers: 0
Hi ,
I am using child rows to display a table inside another table :
When I click the + sign it displays child table:
The first table is agreement_table and I add an event listener to show child table (#income) and it works fine.
Add event listener for opening and closing first level childdetails
$('#agreement_table tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = tableagreement.row( tr );
var rowData = row.data();
var def = tableagreement.row( tr ).data().agreement_id;
if ( row.child.isShown() ) {
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(
'<table class="child_table" id = "income" cellpadding="5" cellspacing="5" border="2" style="padding-left:10px;">'+
'<thead><tr><th>Invoice</th><th> Agreement ID</th><th>Type</span></th><th>statusIncome</tr></thead><tbody>' +
'</tbody></table>').show();
var incomeTable = $('#income').DataTable({
"processing": true,
"serverSide": true,
"scrollX":true,
"stateSave": false,
"info": true,
"dom": 'Blrtip',
"ajax":
{
url:"/xxx/income_fetch.php",
type:'POST',
"data": function ( d ) {
var agreementID = def;
d.agreementID = agreementID;
}
},
order: [[ 1, 'asc' ]],
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": '',
"searchable": false
},
{ data: "agreement_id_fk" },
{ data: "type" },
{
data: "statusIncome",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active text-center">';
}
return data;
},
className: "dt-body-center text-center "
},
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: [3,4]
}
],
select: {
style: 'os',
selector: 'tbody td:not(:first-child)'
},
buttons: [
{ extend: "create", editor: editorIncome },
{ extend: "edit", editor: editorIncome },
{ extend: "remove", editor: editorIncome },
'selectAll'
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop( 'checked', data.statusIncome == 1 );
} ,
destroy: true
});
tr.addClass('shown');
}
However, when I add an editor instance, when I use the editorIncome.on( 'preOpen', function ( e ) { function, it gets the
row data and checks the status using data.statusIncome , if the status is 1 it doesn't allow to edit otherwise we can edit the record.
Problem: when I load the datable first time, the console.log(statusIncome) inside the editor preOpen function it loads and displays the data status as expected , but when I close the row and open it again , it displays undefined value. In conclusion, the console.log(statusIncome) only work for the first time when datatable is loaded and shows undefined value otherwise.
or in other words, when I first time open the child level details, it works fine and when I close the child details and open it again it doesn't work.
$('#income').on( 'change', 'input.editor-active', function () {
editorIncome
.edit( $(this).closest('tr'), false )
.set( 'statusIncome', $(this).prop( 'checked' ) ? 1 : 0 )
.submit();
} );
$('#income').on( 'click', 'tbody td:not(:last-child, :first-child)', function (e) {
editorIncome.inline( this );
} );
editorIncome.on( 'preOpen', function ( e ) {
var mode = editorIncome.mode(); // Gets editor mode, (create, edit, remove)
var modifier = editorIncome.modifier(); // Gets the selected row of the table
if ( modifier ) {
// Get data for this row
var data = incomeTable.row( modifier ).data();
var statusIncome = data.statusIncome;
console.log(statusIncome);
// editor.clear( 'refglobaloptions.OptionValue' );
if (statusIncome == 1){
alert("You cannot Edit confirmed Income");
return false;
}
else{
return true;
}
}
} );
** Thank you **
Answers
Its hard to say what the problem might be without seeing the issue in a running test case. Is it possible for you to provide one?
Have you looked at the Parent Child Editing blog? If not maybe it will help you refactor your code to eliminate the issue.
Kevin
@kthorngren
I followed the link and it sorted my problem. Thank you
However, there is an issue with using Duplicate Button
I can see some posts talking about Duplicate button doesn't work with inline editing ?
for example in [https://editor.datatables.net/examples/api/duplicateButton.html] (https://editor.datatables.net/examples/api/duplicateButton.html "https://editor.datatables.net/examples/api/duplicateButton.html")
if I change the mode of editing to inline, the duplicate button just acts as a edit button?
Is it an expected behaviour?
Thank you
I wouldn't expect to use the Duplicate button while inline editing. The button should only be active fi you have a selected row. Like this example. The Edit button isn't available while inline editing. Row selection uses the first column ony.
If you still need help please provide a test case showing the issue.
Kevin
@kthorngren
Everything is sorted now. Appreciate your help as always.
Thank you