Tab activates the editor only in each second column

HTI_Rajko · October 20

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 · October 20

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 · October 20

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 · October 20

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 · October 20

$(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 · October 20

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 · October 20

Wow, thanks for your help!

allan · October 21

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

Allan

allan · October 21

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 · October 22

Many many thanks. I will wait for the release.

Tab activates the editor only in each second column

Tab activates the editor only in each second column

Answers

Howdy, Stranger!

Categories

DataTables

Tab activates the editor only in each second column

Tab activates the editor only in each second column

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables