DataTable Editor inline editing is not working for all columns

DataTable Editor inline editing is not working for all columns

bbrindzabbrindza Posts: 298Questions: 68Answers: 1

Can not inline edit all columns in the front-end. The only column that in editable in the last one in the row . (see image below)

var childTable;
var childTable2;
var childTable3;
var editor; // use a global for the submit and return data rendering
var salespersonNumber;
var customerNumber;
var productNumber;

$(document).ready(function() {

   function format(rowData) {
        var childTable = '<table id="customerRows_' + rowData.salespersonNumber + '" class="display compact nowrap w-100" 
             width="100%">' +
            '<thead style="display:none"></thead >' +
            '</table>';
        return $(childTable).toArray();
    }

    function format2(rowData) {
        var childTable2 = '<table id="productRows_' + rowData.customerNumber + '" class="display compact nowrap w-100" 
         width="100%">' +
            '<thead style="display:none"></thead >' +
            '</table>';
        return $(childTable2).toArray();
    }

   function format3(rowData) { 
      var childTable3 = 
            '<table id="budgetRows_' + rowData.productNumber + '" class="display budgetDetailRow cell-border" width="85%">' +
            '<thead><tr><th>January</th><th>February</th><th>March</th><th>April</th><th>May</th><th>June</th> 
                <th>July</th><th>August</th><th>September</th><th>October</th><th>November</th><th>December</th></tr> 
            </thead >' +
            '</table>';
      return $(childTable3).toArray();
    }

    // **** Main table
    var table = $('#salespersonByBillTo').DataTable({
        dom: 't',
        ajax: {  type: 'POST',
                   url: 'getSalepersonByCustomerBillTo_SalespersonData.php',
                   data: {salespersonNumber: '5'},
        },
        pageLength:100,
        columns: [
            {
                className: 'detail-level-control_1',
                orderable: false,
                data: null,
                defaultContent: '',
                width: '8px'
            },
            { data: "salesperson",    },
            { data: 'count',  orderable: false      },
            { data: 'salespersonNumber', visible: false     }
        ],
        order: [[1, 'asc']],
    });

  // **** Event listener for opening and closing 1st level child details

   $('#salespersonByBillTo tbody').on('click', 'td.detail-level-control_1', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        var rowData = row.data();

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            // Destroy the Child Datatable
            $('#customerRows_' + rowData.salespersonNumber).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format(rowData)).show();
            var id = rowData.salespersonNumber;
            salespersonNumber = rowData.salespersonNumber;

            childTable = $('#customerRows_' + id).DataTable({
                dom: 't',
                ajax: { 
                        type: 'POST',
                        url: 'getSalepersonByCustomerBillTo_CustomerData.php',
                        data: {salespersonNumber: salespersonNumber},
                },
                pageLength:100,

                columns: [
                    {
                        className: 'detail-level-control_2',
                        orderable: false,
                        data: null,
                        defaultContent: '',
                        width: '8px'
                    },
                    { data: 'customer'},
                    { data: 'count',
                      orderable: false
                    },
                    { data: 'customerNumber',
                        visible: false
                    }
                ],
                select: false,
            });

            tr.addClass('shown');
        }
    });

    // **** Event listener for opening and closing 2nd level child details

    $('tbody').on('click', 'td.detail-level-control_2', function () {
        var tr = $(this).closest('tr');
        var row = childTable.row(tr);
        var rowData = row.data();

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            // Destroy the Child Datatable
            $('#productRows_' + rowData.customerNumber).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format2(rowData)).show();
            var id = rowData.customerNumber;
            customerNumber = rowData.customerNumber;

            childTable2 = $('#productRows_' + id).DataTable({
                dom: "t",
                ajax: {
                        type: 'POST',
                        url: 'getSalepersonByCustomerBillTo_ProductData.php',
                        data: {salespersonNumber: salespersonNumber,
                               customerNumber: customerNumber
                              },
                },
                pageLength:100,
                columns: [
                    {
                        className: 'detail-level-control_3',
                        orderable: false,
                        data: null,
                        defaultContent: '',
                        width: '8px'    
                        },
                        { data: 'status' },
                        { data: 'productNumber'},
                        { data: 'productDescription' },
                        { data: 'customerShipToName' },
                        { data: 'location' }
                           ],

                select: false,
            });

            tr.addClass('shown');
        }
    });

    // *** Event listener for opening and closing 3nd level child details 

    $('tbody').on('click', 'td.detail-level-control_3', function () {
         var tr = $(this).closest('tr');
         var row = childTable2.row(tr);
         var rowData = row.data();

     if (row.child.isShown()) {
         // This row is already open - close it
         row.child.hide();
         tr.removeClass('shown');

         // Destroy the Child Datatable
         $('#budgetRows_' + rowData.productNumber).DataTable().destroy();
     }
     else {

         // Open this row
         row.child(format3(rowData)).show();

          var id = rowData.productNumber;
          productNumber = rowData.productNumber;
 
         editor = new $.fn.dataTable.Editor( {
         ajax: {
            type: 'POST',
                url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
                data: { salespersonNumber: salespersonNumber,
                       customerNumber: customerNumber,
                       productNumber: productNumber
                       },
              },
             
             table: '#budgetRows_' + id,
             fields: [ {
                     label: 'January Budget:',
                     name:  'BD$01'
                 }, {
                     label: 'February Budget:',
                     name:  'BD$02'
                 }, {
                     label: 'March Budget:',
                     name:  'BD$03'
                 }, {
                     label: 'April Budget:',
                     name:  'BD$04'
                 }, {
                     label: 'May Budget:',
                     name:  'BD$05'
                 }, {
                     label: 'June Budget:',
                     name:  'BD$06'
                 }, {
                     label: 'July Budget:',
                     name:  'BD$07'
                 }, {
                     label: 'August Budget:',
                     name:  'BD$08'
                 }, {
                     label: 'September Budget:',
                     name:  'BD$09'
                 }, {
                     label: 'October Budget:',
                     name:  'BD$10'
                 }, {
                     label: 'November Budget:',
                     name:  'BD$11'
                 }, {
                     label: 'December Budget:',
                     name:  'BD$12'
                 }
             ]
         } );
  
         // Activate an inline edit on click of a table cell
         $('#budgetRows_' + id).on( 'click', 'tbody td:not(:first-child)', function (e) {
             editor.inline( table.cell( this ).index(), {
                 onBlur: 'submit'
             } );
         } );
 
         childTable3 = $('#budgetRows_' + id).DataTable({
             dom: 't',
             ajax: {
                type: 'POST',
                    url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
                    data: { salespersonNumber: salespersonNumber,
                            customerNumber: customerNumber,
                            productNumber: productNumber
                        },
                },
             serverSide: true,
             columns: [
                              { data: 'BD$01'},
                              { data: 'BD$02'},
                              { data: 'BD$03'},
                              { data: 'BD$04'},
                              { data: 'BD$05'},
                              { data: 'BD$06'},
                              { data: 'BD$07'},
                              { data: 'BD$08'},
                              { data: 'BD$09'},
                              { data: 'BD$10'},
                              { data: 'BD$11'},
                              { data: 'BD$12'}
             ],
             select: {
                 style:    'os',
                 selector: 'td:first-child'
             },
         } );
    }

 });   
} );//END $(document).ready(function() 
} );

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    Your selector is 'tbody td:not(:first-child)', so all cells apart from the first column should be editable.

    Are you able to give me a link to your page so I can take a look?

    Thanks,
    Allan

  • bbrindzabbrindza Posts: 298Questions: 68Answers: 1

    Unfortunately it is behind our firewall, I could try to put together a test case how the data from the SSP is dynamically generate in the front-end, however I can not see where I can provide JSON for the front end in https://live.datatables.net/.

  • bbrindzabbrindza Posts: 298Questions: 68Answers: 1

    Would the SSP JSON data impact this in anyway, I wouldn't see how?

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    I'm wondering if the $ in the names is causing an issue, but I don't think it is used at all in CSS selectors. The jQuery docs don't mention $ for escaping.

    I've just tried creating a simple test case with those same data names and it seems to work okay.

    Are there any messages on the console? Is it possible you have more than one definition for the editor variable (I see you have it global there)?

    Allan

  • bbrindzabbrindza Posts: 298Questions: 68Answers: 1

    No messages in the console log.

    Could it be something to do with dynamically creating the table from the JSON retuned data in my format3 function?

       function format3(rowData) { 
    
          var childTable3 = 
                '<table id="budgetRows_' + rowData.productNumber + '" class="display budgetDetailRow cell-border" width="85%">' +
                '<thead><tr><th>January</th><th>February</th><th>March</th><th>April</th><th>May</th><th>June</th><th>July</th><th>August</th><th>September</th><th>October</th><th>November</th><th>December</th></tr></thead >' +
                '</table>';
          return $(childTable3).toArray();
           
        }
    
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    Answer ✓

    No that looks okay, but looking at that code might have lead me to what the issue is.

    editor.inline( table.cell( this ).index(), {

    But:

    childTable3 = $('#budgetRows_' + id).DataTable({

    I think the table variable is wrong and should be replaced with childTable3.

    Allan

  • bbrindzabbrindza Posts: 298Questions: 68Answers: 1
    edited April 2023

    Yes! Good eyes.. mine are getting older :)
    That guy was hiding on me. You rock. Thank You.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    Phew - good to hear we got to the bottom of it :)

    Allan

Sign In or Register to comment.