GridView - How to drag and drop items from one grid to another

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:

[C#]
settings.Styles.Table.CssClass="droppableRight";settings.Styles.Row.CssClass="draggableRow right";

- 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);var sourceGrid = ASPxClientGridView.Cast($draggingElement.hasClass("left") ? "gridOne" : "gridTwo");//style elements
    $sourceElement.addClass("draggingStyle");
    $draggingElement.addClass("draggingStyle");
    $draggingElement.width(sourceGrid.GetWidth());//find key
    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.