How to reorder ASPxGridView rows using buttons or drag-and-drop

Question Comments

Hello,

I have seen your example however I have a question from user view point. Once you start to drag a row button you don't have any way to tell which row you are dragging. So unless you remember the row to started with it will be diffcult for users to use this practically. Do you have a way to drag the entire row or have a button with some text to identify the row you are dragging? Please let me know if this is possible.

I agree, that is what I am looking for too.

I was able to use the link tag <a href=""><%#Eval("YourData")%></a> instead of the image; in order to over come the problem of knowing which row is being dragged. So now when I drag the row I can see the text that I am dragging.

I there an MVC equivalent?

Hi Wouter,

I have extracted your question to a separate ticket created on your behalf: Q466606: GridView - How to reorder GridView rows using buttons or drag-and-drop.
Your time and cooperation are appreciated.

Hello,

This approach much more resembles the way Telerik has implemented row dragging and dropping:

       function InitalizejQuery() {
           var openhand = "url(https://mail.google.com/mail/images/2/openhand.cur), move";
           var closedhand = "url(https://mail.google.com/mail/images/2/closedhand.cur), move";

           $('.dxgvDataRow, .dxgvFocusedRow').each(function () {
               $(this).css({ "cursor": openhand });
           });
           $('.dxgvDataRow, .dxgvFocusedRow').draggable({
               helper: function () {
                   var result = $("<table class='dxgvTable' cellspacing='0' cellpadding='0' style='opacity:0.7;background-color:#dddddd;'>").append($(this).clone()).append($("</table>"));
                   $("td", this).each(function (index) {
                       $("td", result).eq(index).css({ 'width': $(this).width() });
                   });
                   return result;
               },
               axis: "y",
               start: function (event, ui) {
                   $("tr", $(this).parent()).each(function (index) {
                       $(this).css({ "cursor": closedhand });
                       $(this).removeClass('dxgvFocusedRow'); // this is the same as removing the focussedrowindex
                       $(this).addClass('dxgvDataRow');
                   });
                   $(this).addClass('dxgvFocusedRow');
               },
               stop: function (event, ui) {
                   $(this).css({ "cursor": openhand });
               }
           });
           $('.dxgvDataRow, .dxgvFocusedRow').droppable({
               drop: function (event, ui) {
                   var draggingRowKey = ui.draggable.find("input[type='hidden']").val();
                   var targetRowKey = $(this).find("input[type='hidden']").val();
                   gridView.PerformCallback("DRAGROW|" + draggingRowKey + '|' + targetRowKey);
               }
               , over: function (event, ui) {
                   var targetRowKey = $(this).find("input[type='hidden']").val();
                   var rowindex = gridView.keys.indexOf(targetRowKey);
                   window.setTimeout(function () { gridView.MakeRowVisibleNew(rowindex); }, 100);
                   $(this).addClass('borderClass');
               }
               , out: function (event, ui) {
                   $(this).removeClass('borderClass');
               }
           });
       }

Best Regards,
Ernstjan Freriks