Inline Editor for whole row does not work.

hbongen

Link to test case:

At the moment i just evalute the test liscense. If everythings works we are interested in a 5 dev liscense

Debugger code (debug.datatables.net):

https://debug.datatables.net/utegoz

Error messages shown:

Chrome

Uncaught TypeError: Cannot read properties of undefined (reading 'attach')
    at Editor.inline (dataTables.editor.js:6817)

Firefox

Uncaught TypeError: editRow is undefined
    inline http://localhost/lib/DatatablesEditor/js/dataTables.editor.js?1634016638:6817

Description of problem:

I read the full Row Inline Editing Example, because it's pretty similar to what we would achieve. The biggest diffrence is that we do not load the data via datatable dierctly. We do a manual ajax request and get data for two tables (only one should be editable) and then initialise it via data property.

Here is some of the code i can share.

 success: function (response)
        {

            let $tableContent = $('#tableContent');
            if ($.fn.dataTable.isDataTable('#tableContent'))
            {
                $tableContent.DataTable().destroy();
            }
            if ($.fn.dataTable.isDataTable('#saldenContent'))
            {
                $('#saldenContent').DataTable().destroy();
            }

            let renderWithRowTypeClass = function (data, type, row, meta)
            {
                if (type === 'display')
                {
                    return '<span class="tableContent' + row['rowType'] + '"> ' + data + '</span>'
                }
            }

            let renderWithIndent = function (data, type, row, meta)
            {
                if (type === 'display')
                {
                    return '<span class="tableContentIndent' + row['rowType'] + '"> ' + data + '</span>'
                }
                return data
            }

            editor = new $.fn.dataTable.Editor({
                ajax: {
                    url: ajaxfile,
                    data: {
                        module: "midTerm",
                        func: "ajaxEditTableData",
                    },
                },
                table: "#tableContent",
                fields: [{
                    label: "col 1",
                    name: "col_1"
                }, {
                    label: "col2",
                    name: "col_2"
                }, 
                //...
                ]
            });

            // Activate an inline edit on click of a table cell
            $tableContent.on('click', 'tbody td.row-edit', function (e)
            {
                editor.inline(dataTablesObj.cells(this.parentNode,'*').nodes(), {
                    submitTrigger: this,
                    submitHtml: '<button>Fertig</button>'
                });
            });



            var dataTablesObj= $tableContent.DataTable({
                "data": response.tabledata,
                "dom": 'Bfrtip',
                "select": {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "info": false,
                "pageLength": 50,
                "scrollX": true,
                "ordering": false,
                "order": [[0, "asc"], [1, "asc"]],
                "searching": false,
                "paging": false,
                "language": {
                    "decimal": ",",
                    "thousands": "."
                },
                columns: [
                    {data: "col 1", width: 0, visible: false},
                    {data: "col 2", width: 0, visible: false},
                    {data: "zeile_art", width: 0, visible: false},
                    {
                        title: "Col tilte",
                        data: "col_text",
                        className: 'dt-nowrap',
                        render: renderWithIndent
                    },
                    {data: "log_lc", title: "localized_last_change"},
                    {
                        data: "action", title: "localized_action_string", visible: showEntries,
                        className: 'row-edit dt-center',
                        render: function (data, type, row, meta)
                        {
                            if (type === 'display')
                            {
                                switch (data)
                                {
                                    case 'I':
                                        return "<button>add</button>";
                                    case 'U':
                                        return "<button>edit</button>";
                                }
                            }
                            return data
                        }
                    },
                    //...
                ]
            }).columns.adjust().draw();

            let saldenTable = $('#saldenContent').DataTable({
             //...

allan

I suspect the issue is related to the lack of an id property on the tr elements. Editor should really be giving an error about that, but possibly since this is client-side sourced data, that isn't being triggered.

Do you have a id available for the rows, and can you add that to the tr elements please?

If that doesn't work, as you able to give me a link to a test case so I can trace it through?

Thanks,
Allan

hbongen

We have fixed it (the id could be part of the problem), was also probably some reinitialisation.