Editor doesn't save data locally

OleksandrOlashyn

Hi All,

I tried to use Editor (2.0.2) to modify the data locally (via inline editing) and then send it in bulk via custom function. However, changes aren't saved locally. I saw another similar post, but in my case I specified idSrc property and didn't have any errors in the console. Attached you can find gif of changes not being saved and empty console.
Here is my editor initialization.

     editor = new $.fn.dataTable.Editor( {
            table: "#entities_table",
            idSrc:  'Id',
            fields: [ {
                    name: "Tickets"
                }, {
                    name: "Hardware"
                }, {
                    name: "Software"
                }, {
                    name: "Training"
                },{
                    name: "Information"
                }, {
                    name: "Other"
                }
            ]
        } );

        $('#entities_table').on( 'click', 'tbody td.editable', function (e) {
            editor.inline( this );
        } );

Here is datatables initalization:

        var table = $('#' + tableId).DataTable({
            "data": entities,
            "columnDefs": [{
                    "targets": [idColumnNumber],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [periodDateColumnNumber],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [quarterColumnNumber],
                    "visible": false
                },
                {
                    "targets": [yearColumnNumber],
                    "visible": false
                },
                {
                    "targets": [lastVisibleColumnNumber],
                    "defaultContent": "<button class='btn btn-default'>Open</button>"
                }
            ],
            "columns": [{
                    data: 'Period',
                    sortable: false
                },
                {
                    data: 'Tickets',
                    sortable: false,
                    className: 'editable'
                },
                {
                    data: 'Hardware',
                    sortable: false,
                    className: 'editable'
                },
                {
                    data: 'Software',
                    sortable: false,
                    className: 'editable'
                },
                {
                    data: 'Training',
                    sortable: false,
                    className: 'editable'
                },
                {
                    data: 'Information',
                    sortable: false,
                    className: 'editable'
                },
                {
                    data: 'Other',
                    sortable: false,
                    className: 'editable'
                },
                {
                    data: null,
                    sortable: false
                },
                {
                    data: 'Id',
                    orderable: false
                },
                {
                    data: 'PeriodDate'
                },
                {
                    data: 'Quarter'
                },
                {
                    data: 'Year'
                }
            ],
            "rowId": 'Id',
            "order": [
                [periodDateColumnNumber, 'asc']
            ],
            "pageLength": 12,
            "autoWidth": false,
            "dom": "t<'pagination-wrapper'p>",
            "lengthChange": false,
            "createdRow": function (row, data, dataIndex) {
                $(row).addClass('entitylist-tr');
            },
            "rowCallback": function (row, data) {
                $(row).children().each(function (index, td) {
                    if (index >= 0 && index <= lastVisibleColumnNumber) {
                        $(this).addClass('entitylist-td');
                        if (index == 0) {
                            $(this).addClass('entitylist-td-first');
                        }
                        if (index == lastVisibleColumnNumber) {
                            $(this).addClass('entitylist-td-last');
                        }
                    }
                });
            }
        });

        $('#entities_table tbody').on('click', 'button', function () {
            let table = $('#entities_table').DataTable();
            let data = table.row( $(this).parents('tr') ).data();
            window.open("{{support_pp_details_page}}?id=" + data.Id, "_self");
        } );

allan

Hi,

It looks like you might be clicking outside of the cell to "save" it? If that is the behaviour you want, you need to specifically tell Editor that using the onBlur option - e.g.:

   $('#entities_table').on( 'click', 'tbody td.editable', function (e) {
       editor.inline( this, {
           onBlur: 'submit'
       } );
   } );

There is an example of that here.

Allan

OleksandrOlashyn

Hi Allan,

That worked. Thanks for your help.