Inline editing for child grid

Inline editing for child grid

mamta.kathar@apergy.commamta.kathar@apergy.com Posts: 4Questions: 1Answers: 0
edited June 2018 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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.commamta.kathar@apergy.com Posts: 4Questions: 1Answers: 0

    Hello Allan,

    Thanks a lot for your help. It woked:)

    -Mamta

This discussion has been closed.