The example demonstrates how to use the jQuery framework to drag an item from one grid to another.
- Use jQuery UI Draggable and Droppable plug-ins;
- Define "draggable" and "droppable" items:
[ASPx]<Styles><TableCssClass="droppableLeft"></Table><RowCssClass="draggableRow left"></Row></Styles>
- Use the invisible ASPxGlobalEvents control and handle its client-side ControlsInitialized/EndCallback events;
- Initialize the defined draggable/droppable items via the corresponding jQuery selectors. The "start" event handler can be used to obtain the key of the dragged row and apply conditional styling to it:
[JScript]start: function(ev, ui){var $sourceElement = $(ui.helper.context);var $draggingElement = $(ui.helper); //style elements $sourceElement.addClass("draggingStyle"); $draggingElement.addClass("draggingStyle"); //find keyvar sourceGrid = ASPxClientGridView.Cast($draggingElement.hasClass("left") ? "gridFrom" : "gridTo"); rowKey = sourceGrid.GetRowKey($sourceElement.index() - 1);}
- Handle the "drop" event of the "droppable" items and perform a callback to the callback panel that has both grids nested inside to perform the data editing functionality.
Select the "script.js" source file and review the comments to find an illustration of the above steps.
See Also:
T116869: GridView - How to drag and drop items from one grid to another
E4582: How to reorder ASPxGridView rows using buttons or drag-and-drop
Question Comments
Added By: Marc Michaels at: 1/16/2013 6:03:17 AM
Where is DX.ashx? I can't find any mention of it anywhere.
Added By: Marc Michaels at: 1/16/2013 6:14:32 AM<div class="draggable"> ??? Can't find this anywhere in the example as well. This example really leaves me in the dark there is no explanation of anything. Sadly it's the closest thing I can find to help me drag from one grid and drop on another. Just going to have to struggle through it.
Added By: Marc Michaels at: 1/16/2013 6:21:13 AMRunning example simply results in "The resource cannot be found".
Added By: Mark OMeara at: 8/19/2014 6:59:25 PMCan this example be adjusted to also drag and drop within the same grid? i.e. for ordering of rows?
Added By: Anthony (DevExpress Support) at: 8/20/2014 5:18:06 AMHi Mark,
We have the How to reorder ASPxGridView rows using buttons or drag-and-drop example that shows how to reorder grid rows using the same jQuery UI library. Please use the approach from it to accomplish your task.
Can you post the code for the Helper class used in the code behind of Default.aspx?
Added By: Artem (DevExpress Support) at: 11/12/2014 11:49:36 PMHello Nicholas,
I've made this class visible in web. Note that you can download this example using the Downloads - > Example link and research it locally.
Thanks,
Artem
This code works fine on my Android tab. But when I place the same controls (Grids) in ASPxNavBar and run it on the Tab, it does not work any suggestions?
Added By: Pavlo (DevExpress Support) at: 1/22/2016 5:23:48 AMHello,
I see that you've already asked a similar question in the context of the ASPxGridView does not work when placed in the ASPxNavBar ticket. Let us continue our discussion there.
I have used the attached code and its working. Thanks for sharing the code and also the demo.
I want little extra feature adding to this. In my requirement i need to select multiple rows and drop to another grid.
Can you please help me.
Thanks in advance. Added By: Vladimir (DevExpress Support) at: 2/25/2016 11:03:24 PM
Hello,
To process your recent post more efficiently, I created a separate ticket on your behalf: T350166: How to use jQuery to drag and drop items from one ASPxGridView to another. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.