rowReorder selects a number of columns of the table and cannot move row

hvhoek

Link to test case:
Debugger code (debug.datatables.net): None
Error messages shown: None
Description of problem:

I cannot move the rows. The 4 arrow cursor appears, but it looks as if a selection is made of a number of columns in the direction where I'm moving.

$regelsTabel.DataTable({
              ajax: inkoopfactuurRegelUrl,
              order: [[1, 'asc']],
              dom: 'Bfrtip',
              display: 'bootstrap',
              responsive: true,
             columns: [
                  {
                      targets: 0,
                      data: null,
                      defaultContent: '',
                      className: 'select-checkbox',
                  },
                  {
                      data: 'regelnr', className: 'reorder'
                  },
                  {
                      data: 'referentienummer',
                      className: 'select2 editable',
                      sClass: 'editable',
                      render: function (data) {
                          return data
                      }
                  }
                 ... other fields
              ],
              keys: {
                  columns: ':not(:first-child), 2',
                  editor: editor
              }
              ,
              select:
                  {
                      style: 'os',
                      selector: 'td:first-child'
                  }
              ,
              buttons: [
                  {
                      extend: "createInline",
                      editor: editor
                  },
                  {extend: "edit", editor: editor},
                  {extend: "remove", editor: editor}
              ],
              columnDefs: [
                  {
                      orderable: true, className: 'reorder', targets: 1
                  }, {
                      orderable: false,
                      targets: '_all'
                  }
              ],
              rowreOrder:
                  {
                      {#selector: 'td:nth-child(2)',#}
                      dataSrc: 'regelnr',
                      editor: editor
                  },

I use the following stuff:
bootstrap 5, dataTables, Editor (licensed), autoFill, Buttons, colReorder, DataTime, FixedColumns, FixedHeader, KeyTable, Responsive, Rowgroup, RowReorder, Scroller, SearchBuilder, SearchPanes, and Select.

I ran out of ideas to fix this problem.

Thanks in advance.
Henk

kthorngren

Change this:

              rowreOrder:
                  {
                      {#selector: 'td:nth-child(2)',#}
                      dataSrc: 'regelnr',
                      editor: editor
                  },

to something like this:

              rowReorder:
                  {
                      selector: 'td:nth-child(2)',
                      dataSrc: 'regelnr',
                      editor: editor
                  },

Change rowreOrder1 torowReorderand change the-option rowReorder.selector` option.

Kevin

hvhoek

I feal ashamed. Thanks anyway. It is solved.