Tab activates the editor only in each second column

HTI_Rajko

Error messages shown: none
Description of problem: In one of my tables I use serverside processing because of the amount of data. I also use inline editing. When I try to use the tab key, it only activates the editor in every second column. Is this a known issue?

kthorngren

This example using the KeyTable extension doesn't seem to exhibit the issue you describe. Can you post a link to a test case showing the issue so we can what you have to help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

HTI_Rajko

Hi Kevin, thanks for your quick response.
Unfortunatly I can't send a test link because I don't have a test server out there at the moment. This is a little bit complicated because of the serverside processing.
I will test it without the serverside part and a reduced set of data and when the issue is still there, I will comeback with my question and a test case.

kthorngren

I don't think the problem is due to server side processing. The issue is happening with the client side table and server side processing is not involved with the tab process. Possibly you can post your Editor and Datatables Javascript code. Maybe we can see something obvious.

Kevin

HTI_Rajko

$(document).ready( function () {
    DataTable.render.ellipsis = function ( cutoff ) {
        return function ( data, type ) {
            if ( type === 'display' ) {
                if(data == null) return '';
                if(data.length > cutoff) {
                    return '<span title="' + data + '">' + data.substring(0, cutoff - 2) + '…</span>';
                } else {
                    return data;
                }
            }
            // Search, order and type can use the original data
            return data;
        };
    };
    let editor = new DataTable.Editor({
        ajax: '/resource/edit',
        fields: [
            {
                label: 'Inventar Nr.',
                name: 'inventoryNumber',
                multiEditable: false
            },
            {
                label: 'Serien-Nr.',
                name: 'serialNumber',
                multiEditable: false
            },
            {
                label: 'Eigentümer',
                name: 'ownerId',
                type: 'select'
            },
            {
                label: 'Nummer',
                name: 'key',
                multiEditable: false
            },
            {
                label: 'Key Typ',
                name: 'keyTypeId',
                type: 'select',
                options: [
                    { label: 'Real', value: 4 },
                    { label: 'Test', value: 32 },
                ]
            },
            {
                label: 'Ressourcen-Typ',
                name: 'resourceTypeId',
                type: 'select'
            },
            {
                label: 'Barcode',
                name: 'markerId',
                multiEditable: false
            },
            {
                label: 'Modell-Typ',
                name: 'modelType',
            },
            {
                label: 'Name',
                name: 'name',
                multiEditable: false
            },
            {
                label: 'Beschreibung',
                name: 'description',
                type: 'textarea',
            },
            {
                label: 'Prüfstatus',
                name: 'inspectionStatus',
                type: 'readonly'
            },
            {
                label: 'Einsatzstatus',
                name: 'useStatus',
                type: 'readonly'
            },
            {
                label: 'repariert',
                name: 'fixedAsset',
                type: 'checkbox',
                default: 0,
                options: [
                    {
                        label: '',
                        value: 1
                    }
                ]
            },
            {
                label: 'Letzte Inspektion',
                name: 'lastMaintenanceDate',
                type: 'readonly'
            },
            {
                label: 'Nächste Inspektion',
                name: 'nextMaintenanceDate',
                type: 'datetime',
                format: 'DD.MM.y',
                wireFormat: 'YYYY-MM-DD',
            },
            {
                label: 'Hersteller',
                name: 'manufacturerId',
                type: 'select'
            },
            {
                label: 'Baujahr',
                name: 'yearOfManufacture',
            },
            {
                label: 'Kaufdatum',
                name: 'purchaseDate',
                type: 'datetime',
                format: 'DD.MM.y',
                wireFormat: 'YYYY-MM-DD',
            },
            {
                label: 'Inbetriebnahme',
                name: 'firstUseDate',
                type: 'datetime',
                format: 'DD.MM.y',
                wireFormat: 'YYYY-MM-DD',
            },
            {
                label: 'Garantie bis',
                name: 'warrantyExpiryDate',
                type: 'datetime',
                format: 'DD.MM.y',
                wireFormat: 'YYYY-MM-DD',
            },
            {
                label: 'Lagerort',
                name: 'stockLocationId',
                type: 'select'
            },
            {
                label: 'Lieferant',
                name: 'supplierId',
                type: 'select'
            },
        ],
        table: '#resourceTable',
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        },
        i18n: {
            create: {
                button: 'Neu',
                title: 'Neue Ressource erstellen',
                submit: 'Erstellen'
            }
        }

    });
    //inspectionStatus: 1 = gesperrt, 2 = freigegeben
    //Use_status: 10 = ?, 20 = verschrottet, 30 = ?, 40 = ?, 99 = ?
    //KeyId: 4 = SystemNr., 32 = Muster
    let resourceTable = new DataTable('#resourceTable', {
        language: {
            url: '/js/DataTables/de-DE.json'
        },
        'ajax': {
            'url': '/resource/getJson',
            'type': 'POST',
            'datatype': 'json',
            'data': 'data.data'
        },
        processing: true,
        serverSide: true,
        length: 100,
        paging: true,
        scroller: true,
        scrollCollapse: true,
        scrollY: $(window).height() - 420,
        order: [[4, 'asc', 'key']],
        columns: [
            {
                data: null,
                orderable: false,
                render: DataTable.render.select()
            },
            {
                data: 'inventoryNumber',
                name: 'inventory_number'
            },
            {
                data: 'serialNumber',
                name: 'serial_number'
            },
            {
                data: 'ownerName',
                editField: 'ownerId',
                render: DataTable.render.ellipsis( 40 ), //Abschneiden
                name: 'c2.company_name'
            },
            {
                data: 'key',
                name: '`key`'
            },
            {
                data: 'keyTypeId',
                name: 'key_type_id',
                render: function (data) {
                    if(data === 4) return 'Real'
                    if(data === 32) return 'Test'
                    return ''
                }
            },
            {
                data: 'resourceTypeName',
                editField: 'resourceTypeId',
                name: 'rt.name'
            },
            {
                data: 'markerId',
                name: 'marker_id'
            },
            {
                data: 'modelType',
                name: 'model_type'
            },
            {
                data: 'name',
                name: 'r.name'
            },
            {
                data: 'description',
                render: DataTable.render.ellipsis( 20 ),
                name: 'r.description'
            },
            {
                data: 'inspectionStatus',
                name: 'inspection_status'
            },
            {
                data: 'useStatus',
                name: 'use_status'
            },
            {
                data: 'fixedAsset',
                name: 'fixed_asset',
                render: function (data) {
                    if(data === 1) {
                        return 'Ja'
                    }
                    return ''
                }
            },
            {
                data: 'lastMaintenanceDate',
                render: DataTable.render.date('DD.MM.y'),
                name: 'last_maintenance_date'
            },
            {
                data: 'nextMaintenanceDate',
                render: DataTable.render.date('DD.MM.y'),
                name: 'next_maintenance_date'
            },
            {
                data: 'manufacturerName',
                editField: 'manufacturerId',
                render: DataTable.render.ellipsis( 40 ),
                name: 'c1.company_name'
            },
            {
                data: 'yearOfManufacture',
                name: 'year_of_manufacture'
            },
            {
                data: 'purchaseDate',
                render: DataTable.render.date('DD.MM.y'),
                name: 'purchase_date'
            },
            {
                data: 'firstUseDate',
                render: DataTable.render.date('DD.MM.y'),
                name: 'first_use_date'
            },
            {
                data: 'warrantyExpiryDate',
                render: DataTable.render.date('DD.MM.y'),
                name: 'warranty_expiry_date'
            },
            {
                data: 'stockLocationName',
                editField: 'stockLocationId',
                render: DataTable.render.ellipsis( 20 ),
                name: 'sl.name'
            },
            {
                data: 'supplierName',
                editField: 'supplierId',
                render: DataTable.render.ellipsis( 20 ),
                name: 'c3.company_name'
            },
        ],
        keys: {
            columns: ':not(:first-child, .documentButton)',
            keys: [9],
            editor: editor,
            editOnFocus: true
        },
        select: {
            selector: 'td:first-child',
            style: 'os',
        },
        layout: {
            topStart: {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'excel', text: 'Nach Excel exportieren' },
                ]
            }
        },
    });
});

kthorngren

Well, that's strange. It seems your suspicion is correct. I built a simple example based on your code:
https://live.datatables.net/guwafemu/567/edit

Tab skips every other column. Comment out serverSide: true, and the tabs work as expected. @allan will need to take a look to see why server side processing causes this issue.

Kevin

HTI_Rajko

Wow, thanks for your help!

allan

That is certainly unexpected! I'll take a look later on today and post back.

Allan

allan

I've identified the error in Editor and committed a fix, which will ship in the next release. That will be Editor 2.4 and hopefully isn't too far away - a few weeks perhaps.

If you need the fix before then, I can give you instructions on how to patch the Editor source?

Allan

HTI_Rajko

Many many thanks. I will wait for the release.