Editor + KeyTable: Dropdown issues

VascoOliveira

I'm evaluating the Editor plugin, and have the following scenario configured, using Datatables + Editor + KeyTables.

The basic idea is to provide the users with an Excel similar experience, providing a smoth operation.

I'm having an issue with the KeyTables + Editor integration, when using a combobox field.

The Datatables + Editor + KeyTable configuration is:

    const editor = new $.fn.dataTable.Editor({
        table: "#table",
        fields: [{
                label: "Field1",
                name: "Field1"
            },
            {
                label: "Select1",
                name: "Select1",
                type: "select"
            },
            {
                label: "Select2",
                name: "Select2",
                type: "select"
            }
        ]
    });

    const table = $('#table').DataTable({
        ajax: {
            url: "api/load"
            type: "POST",
            datatype: "json",
            dataSrc: ""
            },
            keys: {
              editor:  editor,
              editOnFocus: true       
            },
            select: {
                style:    'os',
                selector: 'td:first-child',
                blurable: true
            },
            columns: [{
                data: "Field1"
            },
            {
                data: "Select1"
            },
            {
                data: "Select2"
            }
        ]
    });

    // Inline editing on tab focus
    $('#table').on('key-focus', function (e, datatable, cell) {
       editor.inline(cell.index());
    });

When the field is a dropdown (select), i'm having a few strange issues:
1. When the data is loaded, the dropdown fields are empty. Only when tabbing/clicking on the field, it shows the dropdown, and on blur, the field data is changed to the select value
2. Due to the differences between sizes, length, etc, when on the dropdown field, there are some row adjustments, and it creates a strange effect.

Is there any configuration that could mitigate the above issues? Please note that the idea is to have the smothest editing experience possible.

There are some plugins to improve the dropdown lists, as Select2 or Selectize.

Would the use of any of these plugins improve these dropdowns specific issues? And if so, can Select2/Selectize be used with the Editor plugin in the free evaluation period (15 days).

I downloaded the CSS and JS files for Select2 here, but i received the following error:
"Uncaught Error adding field - unknown field type select2" - jquery 1.12.4

VascoOliveira

I've downloaded the latest night build for the KeyTables plugin, and the integration seems better, nevertheless, issues 1) and 2) still exist.

allan

Could you give me a link to your page so I can take a look at it. I don't know why it would be empty initially, so I'll need to debug that one, and the size issue is likely to be CSS related.

Thanks,
Allan

VascoOliveira

The project has a C# backend and can only accessed through the Company VPN.

Is there any way to activate the logs or anything that would enable me to acquire the data you need?

VascoOliveira

Regarding the Select2 or Selectize, do you think it could improve the dropbox handling? Can i try them with the Editor free trial?

allan

Select2 and Selectize typically introduce a whole lot more complexity. They certainly are options and are excellent at what they do, but if it doesn't work with the built in select field type, its going to be doubly hard getting it to work with the plug-ins.

Can you use the debugger to take a trace of the data on your table perhaps? I'm not sure that will be enough to let me resolve this, but its a start.

Allan