Inline editing of a child row

ZeusOLP

Hi, I keep getting the error 'Uncaught TypeError: node is undefined'.

Uncaught TypeError: node is undefined
Editor[F0M][m8D]/< /Editor/js/dataTables.editor.min.js:6873
Editor[f12][z9s]/</< /Editor/js/dataTables.editor.min.js:9092
b62][k3s /Editor/js/dataTables.editor.min.js:9157
Editor[f12][z9s]/< /Editor/js/dataTables.editor.min.js:9090
b62][k3s /Editor/js/dataTables.editor.min.js:9157
f12][z9s /Editor/js/dataTables.editor.min.js:9087
F0M][m8D /Editor/js/dataTables.editor.min.js:6799

Any help would be appreciated.

                var tableUserList = $("#user-list").DataTable({
        ajax: {
            url: "/userList",
            type: "POST"
        },
        columns: [{
                className:      'details-control',
                orderable:      false,
                defaultContent: ''
            }, {
                data: "Logo",
                render: getImg
            }, {
                data: "Username"
            }, {
                data: "Validated"
            }, {
                data: "Subnet"
            }, {
                data: "IPAddress"
            }, {
                data: "ConnectedIP"
            }, {
                data: "Connected"
            }, {
                data: "Type"
            }, {
                data: "Joined"
            }, {
                data: "Show"
            }
        ],
        "order": [[1, 'asc']],
        columnDefs: [{
                targets: [3, 4, 5],
                type: 'ip-address'
            }
        ],
    });

    $('#user-list').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = tableUserList.row( tr );

        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child( format(row.data(), row) ).show();
            tr.addClass('shown');
        }
    } );

    var editor = new $.fn.dataTable.Editor( {
        ajax: "/userList",
        table: "#user-list",
        idSrc:  'Username',
        fields: [ {
                label: "Logo:",
                name: "Logo"
            }, {
                label: "Username:",
                name: "Username"
            }, {
                label: "Validated:",
                name: "Validated"
            }, {
                label: "Subnet:",
                name: "Subnet"
            }, {
                label: "IPAddress:",
                name: "IPAddress"
            }, {
                label: "Type:",
                name: "Type"
            }, {
                label: "Joined:",
                name: "Joined",
                type: "datetime"
            }, {
                label: "Show:",
                name: "Show"
            }, {
                label: "Email:",
                name: "Email"
            }, {
                label: "Mobile:",
                name: "Mobile"
            }, {
                label: "Name:",
                name: "Name"
            }, {
                label: "Gender:",
                name: "Gender"
            }, {
                label: "Birth:",
                name: "Birth",
                type: "date"
            }, {
                label: "Home:",
                name: "Home"
            }
        ]
    } );

    $('#user-list').on( 'click', 'tbody td:not(:first-child)', function (e) {
        if(typeof(e.target._DT_CellIndex) !== 'undefined'){
            if(e.target._DT_CellIndex["column"] != 6 && e.target._DT_CellIndex["column"] != 7 && e.target._DT_CellIndex["column"] != 8 && e.target._DT_CellIndex["column"] != 3 && e.target._DT_CellIndex["column"] != 4){
                editor.inline( this );
            }
        } else {
            editor.inline( this );
        }
    } );

    function format ( d, row ) {
        return '<table class="table-striped table-bordered">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td data-dt-row='+row.index()+' data-dt-column="11">'+d.Name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Email:</td>'+
                '<td data-dt-row='+row.index()+' data-dt-column="12">'+d.Email+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Mobile:</td>'+
                '<td data-dt-row='+row.index()+' data-dt-column="13">'+d.Mobile+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Gender:</td>'+
                '<td data-dt-row='+row.index()+' data-dt-column="14">'+d.Gender+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Birth:</td>'+
                '<td data-dt-row='+row.index()+' data-dt-column="15">'+d.Birth+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Home:</td>'+
                '<td data-dt-row='+row.index()+' data-dt-column="16">'+d.Home+'</td>'+
            '</tr>'+
        '</table>';
    }

kthorngren

Looks like you have more Editor fields defined than columns in the Datatable.

I guess this error occurs when you are trying to inline edit?

Kevin

ZeusOLP

Hi, yeah I know about the number of fields, I am not showing those columns at the beginning.
Yes, I get the error when I try to inline edit in the child row.

kthorngren

I get the error when I try to inline edit in the child row.

Missed that in your title

I'm not sure you can inline edit the child row this way. Maybe you can try passing the fieldName parameter in the inline() call to map the cell to the Editor field. The child rows are not datatable row so the Editor is not able to automatically map them.

Or you can create the child as a Datatable and follow the steps in this blog about edit child rows.

Kevin