rowReorder.disable() not working as it should

alaneo

Hi. I'm facing a strange issue on my dataTable. I've implemented a rowReorder function (including event) and this is working perfectly fine except one scenario. When I click a column to enable the sorting I want to disable to rowReorder if the column is not the Order column, and for this I have an event set for 'th' and this is also working perfeclty fine. So for example if I click on the column Name to sort the table by this column then the rowReorder (drag and drop) is disabled, and if i click the Order column to sort the table by this column then the rowReorder is enabled and its working fine. My issue is when I click the Name column header to sort the table by Name to disable the rowReorder function and I refresh the page, even if Im checking for what column has sorting enabled my rowReorder is always enabled event thought I'm calling the rowReorder.disable(). Below is code for my dataTable. Please help

$(document).ready(function () {

    var dataTable = $("table.reorder-table").DataTable({
            language: GetLanguage(),
            lengthMenu: [[10, 25, 50, 100, 250, 500, 1000], [10, 25, 50, 100, 250, 500, 1000]],
            serverSide: true,
            processing: true,
            stateSave: true,
            ajax: {
                url: GetDataRequestUrl(),
                type: "POST",
                datatype: "json",
                error: function (xhr, errorType, exception) {
                    $("table.reorder-table tbody").html("");
                    $("table.reorder-table")
                        .append(
                            '<tbody><tr class="odd"><td colspan="100%" class="dataTables_empty" valign="top">No data</td></tr></tbody>');
                    $("div.dataTables_processing").hide();
                }
            },
            columns: GetColumnDefinitions(),
            rowReorder: {
                selector: "td:not(:last-child)",
                dataSrc: "Order",
                update: false
            }
        });

        CreateRowReorderEvent(dataTable);

        dataTable.on("click",
            "th",
            function () {
                // if the column header clicked is Order then enable the rowReorder
                if (dataTable.column(this).index() === 0) {
                    dataTable.rowReorder.enable(); // <-- working like it should
                }
                else {
                    dataTable.rowReorder.disable(); // <-- working like it should
                }
            });

        //  below is called after page is reloded (refreshed) but its not disabling the rowReorder function 
        var order = dataTable.order();
        var colIndex = order[0][0]; // <-- get the index of the column where the sorting is applied

        if (colIndex === 0) { // <-- if the column is Order column 
            dataTable.rowReorder.enable();
        } else {
            dataTable.rowReorder.disable(); // <-- this is called but not working
        }
});

colin

Hi @alaneo ,

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

alaneo

Hi @colin ,
Thanks for respond.
Below is a link to the test-case, but I cannot managed to make the rowReorder working on this site. Am I missing something?

http://live.datatables.net/jiwiriga/1/edit?html,css,js,output

Thansk

colin

Hi @alaneo ,

There are few things going on there - all fixed here.

1. the rowReorder JS files were before DataTables, they need to be after
2. you were using an old version, before the rowReorder.disable()/rowReorder.enable() functions were added
3. a few bugs - such as your function name was wrong when it was being called

Hope that helps,

Cheers,

Colin

alaneo

Hi @colin Thanks for fixing my test-case, but still this is not solving my main issue which is: when I disable rowReordering when column Name is set to sort the values and when I refresh the page rowReordering is enabled again but it shouldn't, becasue on the page load in my code you can see I'm checking by which column is data table sorted and even though I'm disabling the rowReoder the drag'n'drop is still working. Thank you for your time

colin

Hi @alaneo ,

I'm not seeing that - in my link above, if I

1. Order by Order
2. Can move the row as expected
3. Order by Name
4. Unable to reorder
5. "Run with JS" or refresh page and then "Run with JS"
6. Name still ordering
7. still can't reorder

Which is what I would expect.

Can you give me steps on how to reproduce your problem, please,

Cheers,

Colin

alaneo

hi @colin Yes you are correct this is working as it should on your test-case but on my project its not. When I corrected the rowReorder JS files order in my test-case and changed the versions to be 1.2.4 my test-case is also working as it should, but in my project still same code, same patern, same js file versions and I can still reorder after page refresh where column Name is ordering. Could this be a reason becasue my dataTable is serverSide processed? The best part is when I debug my initialization.js I can see that the second rowReoder.disable() is executed, but without any effect.

colin

Hi @alaneo ,

serverSide is compatible with RowReorder, so that shouldn't be a problem. All the logic you have is on client-side, so that shouldn't affect. Would you be able to link your page so we can take a look?

Cheers,

Colin

alaneo

hi @colin. Unfortuantely I cannot place link to my page becasue of the NDA so I will have to figure it out by myself. If I will still have some doubts and questions I will definitely ask Thanks for your time and help. Have a good day.

colin

Maybe see if you can replicate it in a fiddle of some sort, that would certainly help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin