using rowreorder with render seems to cause ordering to break

louking

Link to test case: I'm not sure the best way to create a test case. This is like https://editor.datatables.net/examples/extensions/rowReorder but I am rendering a "grip" on top of the readingOrder column with a rendering function.

Description of problem:

I'm using rowReorder. The table doesn't display in the correct order as indicated by the data within the "order" column. In fact clicking the ^ v arrow in the column heading has no effect when the grip is rendered.

The column configuration is as follows, referencing a function for the rendering

{
  "className": "reorder shrink-to-fit",
  "data": "order",
  "label": "Reorder",
  "name": "order",
  "title": "Reorder",
  "type": "hidden"
  "render": render_grip
}

The function depends on fontawesome

function render_grip() {
    return '<i class="fa fa-grip-horizontal" aria-hidden="true"></i>';
}

If I leave out the "render": render_grip property, the order numbers are shown, the rows sort correctly, the ^ v arrows work, and the rowReorder behavior works properly.

Please if you can help, or give me a framework to create a test case so you can debug, it would be much appreciated.

(for my benefit) https://github.com/louking/members/issues/363#issuecomment-776960529

kthorngren

Sounds like you need to use Orthogonal data and return the grip for only the display process. Something like this:

    render: function ( data, type, row ) {
        if ( type === 'display' ) {
            return '<i class="fa fa-grip-horizontal" aria-hidden="true"></i>';
        }
        return data;
    }

You can build a test case using one of the frameworks documented here:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

louking

That worked -- thanks so much for the quick response!

On the framework, yes I know how to do a normal test case, but I wasn't quite sure how to do a test case which would simulate the rowReorder function with the editor interaction. It turns out this really didn't require that, but I didn't know initially that this wasn't a rowReorder problem.

kthorngren

In the future you can use this as a base Editor to start with:
http://live.datatables.net/guwafemu/1/edit

Kevin

louking

Thanks, but not quite sure how I would simulate the server side, e.g., to change the order field for a rowReorder.

kthorngren

I took the example and built a test case here:
http://live.datatables.net/guwafemu/165/edit

The backend part is not available but all the client side works. Depending on the problem you are trying to debug this may or may not work. AFAIK there is not a Datatable JS BIN server for Editor. Although you could simulate using mockajax.js or something like it.

Kevin