Swapping between two rows in a Webgrid

Question

I have a webgrid which gets value from database on load of a partial view in MVC 4 razor. It has 6 columns in total. 1st column is a checkbox column, header is "Select". Two buttons are there in the page (not inside the webgrid), "Save" and "Delete". By selecting any checkbox, if I click on the "Delete" button it will remove the row from the webgrid but not from the database. After hitting the "Save" button all the data will be saved to the database by updating the deleted record.

Out of other 5 columns, 4 columns are coming from database. The rest column is a priority filter column. for that I have used two pictures. One is UP-ARROW and another is DOWN-ARROW (pixel: 16 X 16). Now the purpose of this two picture is to swap between rows. By clicking UP-ARROW of a particular row, the entire row values will be swap with the upper row and for just opposite for the DOWN-ARROW.

A condition is there, if the selected row is the topmost one or the last one then for clicking on the UP-ARROW and clicking for DOWN-ARROW won't work respectively.

I have done every other work except this swapping. I have no idea. But for your information database has a field "SEQUENCE". By swapping rows SEQUENCE will be maintained like 1 for 1st row, 2 for 2nd row and so on. Now if swapping takes place then row 2 may take row 1's position, its present sequence will also be changed from 2 to 1. That value will be stored in a hidden text field.

Please help !!

Move up & Move down both should work with the first and last row condition. I need to go down also...please help...

Answer 1

jQuery('input[name="selectChkBx"]:checked').each(function () {
                    id = this.id;
                    var row = $(this).closest('tr');
                    console.log(row);
                    row.insertAfter(row.next());  // For Moving Down
                    //row.insertBefore(row.prev()); // For Moving Up
                });

Just need to create two buttons. Need to put id's over there and onclick using the id of the button swap rows can be done. Thanks to "Impirator" also. He has shown me the way. Ultimately done. Thanks a Lot to every one for their time to seen this code.

Answer 2

The UI portion of this is quite straightforward. Given some markup like:

<table>
   <tr>
      <td>Blah blah blah</td>
      <td>
         <img src="..." class="up-arrow" />
         <img src="..." class="down-arrow" />
      </td>
   </tr>
   <tr>...</tr>
   ...
</table>

You can use jQuery to just move the <tr> elements up and down:

$('.up-arrow').on('click', moveRowUp);

function moveRowUp() {
    var $row = $(this).closest('tr');
    var $prevRow = $row.prev();
    if ($prevRow.length) $row.insertBefore($prevRow);
}

If you're also asking about how to store this swap back to the database, I'm not sure I can answer without knowing more about your schema. One way would be to keep track of row IDs and swap those as well when you're moving the <tr>.