Question

Currently I am using the table Drag and Drop plugin (http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/) to achieve the drag and drop functionality in my GridView rows.

Probably, I will have to handle the Drop event and send the new row order to the server but I do not have a clue about how to do that.

Bare in mind the row order represents the priority of the records displayed in the GridView. Therefore, the new row order will be stored in the database after the Drop event.

This is the jquery code:

function load_lazyload() {
        $("#ContentPlaceHolder1_GridView").tableDnD({
            onDragClass: "GbiHighlight",
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                var debugStr = "Row dropped was " + row.id + ". New order: ";
                for (var i = 0; i < rows.length; i++) {
                    debugStr += rows[i].id + " ";
                }
                $("#debugArea").html(debugStr);
            },
            onDragStart: function (table, row) {
                $("#debugArea").html("Started dragging row " + row.id);
            }
        });
}

I’d massively appreciate if someone could guide me to find a solution to this requirement.

Answer 1

onDrop event you can make an ajax call and send debugStr to the server to update the new row order. something like

$("#ContentPlaceHolder1_GridView").tableDnD({
  onDrop: function(table, row) {
    var rows = table.tBodies[0].rows,
        newOrder = '';
    for (var i = 0; i < rows.length; i++) {
         newOrder += rows[i].id + " ";
    }

    $.ajax({
      url: 'server_method',
      data: {
        newOrder: newOrder
      }
    });
  }
});

If required you can add success and error handlers in the ajax call.