This example demonstrates how to move ASPxGridView rows using buttons or jQuery Drag&Drop.
To keep the order of rows, it is necessary to set up an extra column to store row order indexes. Then, sort ASPxGridView by this column and deny sorting by other columns. This example stores this information in the unbound column and additionally puts a dictionary "row key = row index" to the session. We have implemented this approach only for demo purposes. You can store this information in your DataSource.
Updated:
We updated an example for v.14.2 to show how to save order information to a database and tune the ASPxGridView drag and drop appearance using the UI Draggable and Droppable plug-ins. If you need to check the unbound column implementation, choose the second item in the version build combo box.
See also:
T191258 - How to reorder GridView rows using buttons or drag-and-drop
E1810: How to use jQuery to drag and drop items from one ASPxGridView to another
E3850: How to reorder ASPxTreeList sibling nodes, using buttons or drag-and-drop
E4299: How to move up or down a line a row of ASPxGridView by using external buttons
Question Comments
Added By: Hiren Joshi (Venture) at: 8/20/2013 3:03:21 PM
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.
Added By: Jacob Blumberg at: 8/27/2013 4:05:00 PMI agree, that is what I am looking for too.
Added By: Hiren Joshi (Venture) at: 9/11/2013 10:54:22 AMI 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.
Added By: Wouter Stichelbout at: 2/11/2014 7:54:23 AMI there an MVC equivalent?
Added By: Vasily (DevExpress Support) at: 2/11/2014 9:48:17 AMHi 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
I am having difficulties figuring out how to actually use a field from the datasource to save the sorting order. Any help will be appreciated.
Added By: Artem (DevExpress Support) at: 12/9/2014 12:17:45 AMHello,
To process your post more efficiently, I created a separate ticket on your behalf: T184636: ASPxGridView - How to save sort order to a database using approach from the E4582. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.
Just a suggestion you should also make these for where people load data via datasource in the code behind because trying to translate this sometime to that things get messed up.
Added By: Anthony (DevExpress Support) at: 4/9/2015 1:07:37 PMHi Gregory,
You are always welcome to create a support ticket if you have difficulties in implementing approaches from our examples.
This example does not work if used within a MasterPage. Has anyone tried this?
Added By: Artem (DevExpress Support) at: 9/2/2015 1:14:20 PMHello Michael,
To process your recent post more efficiently, I created a separate ticket on your behalf: T285292: E4582 doesn't work if ASPxGridView in on a MasterPage. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.
I have go through your example code below, it work fine for my case. But unfortunately after I add second grid view, it not work fine. How to modify the InitalizejQuery() in order to randomly get the current grid view being drag.
Note: I do not drag from one row in one grid view to another grid view. Only drag inside its own grid view.
Appreciated if you can provide me the solution rapidly. Thank you.