Inline editing of a child row

Inline editing of a child row

ZeusOLPZeusOLP Posts: 2Questions: 1Answers: 0
edited October 2020 in Free community support

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>';
    }

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    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

  • ZeusOLPZeusOLP Posts: 2Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736
    Answer ✓

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

    Missed that in your title :smile:

    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

This discussion has been closed.