editor.remove not working

editor.remove not working

lvglvg Posts: 2Questions: 1Answers: 0

I copied the code from this example:
https://editor.datatables.net/examples/inline-editing/fullRowCreate.html

Everything works very fine - I am excited about this great work of datatables.

But removing of lines does not work. The click on the remove-td is received, but the nothing happens.

Some code snippets of my project:

                    const editor = new DataTable.Editor({
                    ajax: '/content/addRemarks.php',
                    table: '#remarks',
                    idSrc: 'id',
                    fields: [
                        {
                            label: 'id',
                            name: 'id',
                            def: "",
                            //type: 'hidden'
                        },
                        {
                            label: 'Mandant',
                            name: 'LABNR',
                            def: $('#hidden_mndnr').val(),
                            type: 'hidden'
                        },
                        {
                            label: 'Kunde',
                            name: 'KNDNR',
                            def: $('#hidden_kndnr').val(),
                            type: 'hidden'
                        },
                        {
                            label: 'Datum',
                            name: 'DATE',
                            def: $('#hidden_date').val(),
                            type: 'hidden'
                        },
                        {
                            label: 'Benutzer',
                            name: 'USER',
                            def: $('#hidden_user').val(),
                            type: 'hidden'
                        },
                        {
                            label: 'OrgaGrp',
                            name: 'labor',
                            def: $('#hidden_orgagrp').val(),
                            type: 'hidden'
                        },
                        {
                            label: 'Kommentar',
                            name: 'REMARK'
                        },

                    ],
                });


                    const table = $('#remarks').DataTable({
                    destroy: true,
                    rowid: 'id',
                    "order": [
                        [2, "DESC"]
                    ],
                    columns: [
                        {
                            data: 'id',
                            //visible: false
                        },
                        {
                            data: 'LABNR',
                            visible: false
                        },
                        {
                            data: 'KNDNR',
                            visible: false
                        },
                        {
                            data: 'DATE',
                            render: function (data, type, row) {
                                if (type === 'display' || type === 'filter') {
                                    return (moment(data).format("DD.MM.YYYY HH:mm:ss"));
                                }
                                return moment(data).format("YYYY-MM-DD-HH-mm-ss");
                            }
                        },
                        {
                            data: 'USER'
                        },
                        {
                            data: 'labor',
                            visible: false
                        },
                        {
                            data: 'REMARK'
                        },
                        {
                            data: null,
                            defaultContent: '<i class="fa fa-pencil"/>',
                            className: 'row-edit dt-center',
                            orderable: false
                        },
                        {
                            data: null,
                            defaultContent: '<i class="fa fa-trash"/>',
                            className: 'row-remove dt-center',
                            orderable: false
                        }
                    ],
                    "scrollResize": true,
                    "scrollY": inViewport($('.layout-content')) - 400,
                    "bScrollCollapse": false,
                    "autoWidth": true,
                    "stateSave": false,
                    "processing": true,
                    "columnDefs": [{
                        "targets": 'nosort',
                        "orderable": false
                    },
                    {
                        "targets": 'nosearch',
                        "searchable": false
                    },
                    ],
                    "select": false,
                    layout: {
                        topStart: {
                            buttons: [
                                {
                                    extend: 'createInline',
                                    editor: editor,
                                    formOptions: {
                                        submitTrigger: -2,
                                        submitHtml: '<i class="fa fa-play"/>'
                                    }
                                }
                            ]
                        }
                    },
                });



                // Confirm on delete.
                // Activate an inline edit on click of a table cell
                table.on('click', 'tbody td.row-edit', function (e) {
                    editor.inline(table.cells(this.parentNode, '*').nodes(), {
                        submitTrigger: -2,
                        submitHtml: '<i class="fa fa-play"/>'
                    });
                });

                // Delete row
                table.on('click', 'tbody td.row-remove', function (e) {
                    console.dir(this.parentNode);
                    editor.remove(this.parentNode, {
                        title: 'Delete record',
                        message: 'Are you sure you wish to delete this record?',
                        buttons: 'Delete'
                    });
                });

On clicking the td.row-remove the console-output print this on the debug console:

The first output results of a click on a row-deleter which was NOT edited beforehand.
The first output results of a click on a row-deleter which WAS edited beforehand.

But in both cases the Confirm-Windows is not showing, the row is not deleted. Nothing happes. Not even an error appears. Just nothing.

Could you see any error in my code??

Regards and THANK YOU
BeSt

Answers

  • allanallan Posts: 64,599Questions: 1Answers: 10,683 Site admin

    Hi,

    It appears to work in the example. Can you link to your page so I can take a look and try to debug the code?

    Thanks,
    Allan

  • lvglvg Posts: 2Questions: 1Answers: 0

    Dear Allen.

    THANK YOU fpr you quick response.
    I try to grant you access to the site. I will contact you by personal message as soon as I managed the access.

    Regards
    BeSt

  • allanallan Posts: 64,599Questions: 1Answers: 10,683 Site admin

    Sound good - thank you. PM me by clicking my forum user name and then the "Send message" button :)

    Allan

Sign In or Register to comment.