Editor instance in child table

Editor instance in child table

Khalid TeliKhalid Teli Posts: 235Questions: 62Answers: 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

Sign In or Register to comment.