Inline editing for child grid

Inline editing for child grid Posts: 4Questions: 1Answers: 0
edited June 2018 in Free community support


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-
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


  • allanallan Posts: 48,700Questions: 1Answers: 7,082 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:
      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;" >'+
                    '<td class="qty" data-dt-row="+row.index()+" data-dt-column="4">'+d.Qty+'</td>'+
                    '<td class="shipno" data-dt-row="+row.index()+" data-dt-column="5">'+d.ShipmentNumber+'</td>'+
                    '<td>Extra info:</td>'+
                    '<td>And any further details here (images etc)...</td>'+
            var editor;
                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: [
                        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
                } );
                // 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
                else {
                    // Open this row
                    row.child( format(, row) ).show();
            } );

    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.


  • Posts: 4Questions: 1Answers: 0

    Hello Allan,

    Thanks a lot for your help. It woked:)


Sign In or Register to comment.