Is it possible to use both row reorder and first column checkbox inline editing?

danvanwijk

Link to test case: https://joomrp.urtestsite.com/portal/inventory/parts_statuses.html
Debugger code (debug.datatables.net):
jquery: function () {

        var editor = new DataTable.Editor({
            ajax: '../../controllers/portal/parts_statuses.php',
            fields: [
                {
                    label: 'Name:',
                    name: 'name'
                },
                {
                    label: 'Description:',
                    name: 'description'
                },
                {
                    label: 'Ordering:',
                    name: 'ordering'
                }
            ],
            table: '#example'
        });

        $('#example').DataTable({
            ajax: '../../controllers/portal/parts_statuses.php',
            columns: [
                {
                    data: null,
                    // orderable: false,
                    render: DataTable.render.select()
                },
                { data: 'name' },
                { data: 'description' },
                { data: 'ordering', className: 'reorder' }
            ],
            columnDefs: [{ orderable: false, targets: [0, 1, 2] }],
            layout: {
                topStart: {
                    buttons: [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                        { extend: 'remove', editor: editor }
                    ]
                }
            },
            rowReorder: {
                dataSrc: 'ordering',
                editor: editor
            },
            // order: [[1, 'asc']],
            // select: true
        });

        editor
            .on('postCreate postRemove', function () {
                // After create or edit, a number of other rows might have been effected -
                // so we need to reload the table, keeping the paging in the current position
                table.ajax.reload(null, false);
            })
            .on('initCreate', function () {
                // Enable order for create
                editor
                    .field('ordering')
                    .fieldInfo('Leave empty to insert as next in list.')
                    .enable();
            })
            .on('initEdit', function () {
                // Disable for edit (re-ordering is performed by click and drag)
                editor
                    .field('ordering')
                    .fieldInfo('This field can only be edited via click and drag row reordering.')
                    .disable();
            });

        // Activate an inline edit on click of a table cell
        $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
            editor.inline(this);
        });
    },
    vanilla: function () {}

Error messages shown: No error message
Description of problem: I need to use rowreorder for the last column and we are following this example https://editor.datatables.net/examples/extensions/rowReorder.html . But it seems like that rowreorder is working using the first column instead of the last. I am not sure that if it is because of the checkbox column or inline editing. I want to use it for the last column named as Ordering. I have attached the code. Please let me know if it is feasible or if there is an alternative for this. Thanks!

allan

You need to use rowReorder.selector to define the selector for RowReorder and select.selector for Select.

Typically for this sort of setup you might have one column with a move icon for RowReorder, and a second column for the checkbox and select action.

Alternatively, you could have the checkbox / select on the first column, and then use a selector such as td:not(:first-child) for RowReorder to have the RowReorder listener on all columns but the first one (I don't think that would work well with inline editing also being active on those columns though - too confusing a UI).

Allan

danvanwijk

Thanks, Allan! Using these options helped to resolve the issue we were facing. We have kept the inline editing enabled for now because it wasn't causing much issues. Thanks for your help!