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?