Inline editing for child grid

mamta.kathar@apergy.com

Hello,

I would like to do inline editing for my child row. It throws me an error
dataTables.editor.min.js:10 Uncaught TypeError: Cannot read property 'contents' of undefined
at Editor.(anonymous function).(anonymous function) [as inline] (http://localhost:3030/libs/DataTables/Editor-2018-06-26-
1.7.3/js/dataTables.editor.min.js:10:82145)
at dataTables.editor.min.js:10
at dataTables.editor.min.js:10

I have attached the code for your reference.

allan

The inline() method doesn't accept a row as a parameter, so I'm afraid editor.inline(row); wouldn't work. Instead what you'd need to do is pass in the element where you want the editing to appear, but you also need to alter the markup a little bit to tell Editor which row is being edited.

This is how that might be done:

Please see the code below:
<script>
  function format ( d, row ) {
            // `d` is the original data object for the row
            return '<table class="subtable" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" >'+
                '<tr>'+
                '<td>Qty:</td>'+
                '<td class="qty" data-dt-row="+row.index()+" data-dt-column="4">'+d.Qty+'</td>'+
                '</tr>'+
                '<tr>'+
                '<td>ShipmentNo.:</td>'+
                '<td class="shipno" data-dt-row="+row.index()+" data-dt-column="5">'+d.ShipmentNumber+'</td>'+
                '</tr>'+
                '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
                '</tr>'+
                '</table>';
        }

        var editor;
        $(document).ready(function(){
            editor = new $.fn.dataTable.Editor( {
                ajax: "/getData.php",
                //data: {qty:'Qty',edit:true},
                table: "#example",
                idSrc:  'OrderNumber',
                fields: [
                    {
                        label: "OrderNumber:",
                        name: "OrderNumber"
                    },
                    {
                        label: "LineNumber:",
                        name: "LineNumber"
                    },
                    {
                        label: "ItemNumber:",
                        name: "ItemNumber"
                    },
                    {
                    label: "Qty:",
                    name: "Qty"
                }, {
                    label: "ShipmentNo.:",
                    name: "ShipmentNumber"
                }
                ]
            } );

            // Activate an inline edit on click of a table cell

        var table = $('#example').DataTable( {
            ajax: "/getData.php",
            columns: [
                {
                    className:'details-control',
                    orderable:false,
                    data: null,
                    defaultContent: ''
                },
                { data: "OrderNumber" },
                { data: "LineNumber" },
                { data: "ItemNumber" },
                { data: "Qty" },
                { data: "ShipmentNumber" }
                ],
            order: [[1, 'asc']],
            select: {
                style:    'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );
            $('#example').on( 'click', 'tbody td.qty', function (e) {//'tbody tr td table td.Qty'tbody td  tbody td.Qty
                editor.inline(this);
            } );

            // Add event listener for opening and closing details
        $('#example tbody').on('click', '.details-control', function () {

            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data(), row) ).show();
                tr.addClass('shown');
            }
        } );
        });
</script>

Note that I've passed in the row to the formatting function for the child so I can access the index, and used data-dt-row and data-dt-column which DataTables uses to figure out which cell in the table that element refers to.

Allan

mamta.kathar@apergy.com

Hello Allan,

Thanks a lot for your help. It woked:)

-Mamta