Tab activates the editor only in each second column

Tab activates the editor only in each second column

HTI_RajkoHTI_Rajko Posts: 5Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    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_RajkoHTI_Rajko Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    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_RajkoHTI_Rajko Posts: 5Questions: 1Answers: 0
    $(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' },
                    ]
                }
            },
        });
    });
    
  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948
    edited 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_RajkoHTI_Rajko Posts: 5Questions: 1Answers: 0

    Wow, thanks for your help!

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

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

    Allan

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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_RajkoHTI_Rajko Posts: 5Questions: 1Answers: 0

    Many many thanks. I will wait for the release.

Sign In or Register to comment.