Does jqGrid have a row swap feature?

Question

I wonder if jqGrid has a built in "row swapping" feature.

It is sometime that I have looked for it on the internet, but no luck so far.

But similar features are (and none can be used for row swaps without problems); DnD and sortableRows;

sortableRows will only change the order of the rows and no way to implement swapping intuitively for users.

In DnD, to make it work best, you need to assign the target to another HTML element or to another jqGrid. But, If you set it to the same jqGrid (to simulate row swapping), it will not allow it.

Thanks in advance.

Answer 1

Typically one uses grids sorted by some column. In the case reordering or swapping of rows have no sense. If you have unsorted grid and need to swap rows you can try to use jQuery.detach method to remove rows temporary from the grid and then use jQuery.before, jQuery.after, jQuery.insertAfter or jQuery.insertBefore to insert detached rows in the new location.

UPDATED: The corresponding demo demonstrate the usage of jQuery.detach in the grid. It has rows with ids "10", "20", "30", "40", ...

I included two buttons on the demo (with id="move" and id="swap"). The first button do simple unconditional work: it detaches the row with id="10" and place it before the row with id="40".

The second button swap rows with ids "10" and "20" using insertAfter or insertBefore methods. Because of different positions of both rows in the grid one from the method can't be used. Additionally if the rows with ids "10" and "20" are one over another one one need to make only one move of rows. I tried to take in consideration all the cases. The corresponding code you will see below. I suppose that one can write more optimized code, but the code which I include below seems still work correctly:

$("#move").button().click(function () {
    var $row = $("#10").detach();
    $row.insertBefore("#40");

    $(this).button("disable");
});
$("#swap").button().click(function () {
    var $row1 = $("#10"), $row2 = $("#20"),
        $next1 = $row1.next(".jqgrow"), $prev1 = $row1.prev(".jqgrow"),
        $next2, $prev2, doOneMove = false, movedOnce = false;

    if ($row2.is($next1) || $prev1.is($row2)) {
        doOneMove = true;
    }

    if ($prev1.length > 0 && !$prev1.is($row2)) {
        $row2.detach().insertAfter($prev1);
        movedOnce = true;
    } else if ($next1.length > 0 && !$next1.is($row2)) {
        $row2.detach().insertBefore($next1);
        movedOnce = true;
    }

    if (doOneMove && movedOnce) {
        return;
    }

    $next2 = $row2.next();
    $prev2 = $row2.prev();
    if ($prev2.length > 0 && !$prev2.is($row1)) {
        $row1.detach().insertAfter($prev2);
    } else if ($next2.length > 0 && !$next2.is($row1)) {
        $row1.detach().insertBefore($next2);
    }
});