This example demonstrates how to use the jQuery framework to drag rows from one grid to another.

Create a callback panel and populate it with grid controls. Use jQuery UI Draggable and Droppable plug-ins and define draggable and droppable items.

<Styles>
    <Table CssClass="droppableLeft"></Table>
    <Row CssClass="draggableRow left"></Row>
</Styles>

Add the ASPxGlobalEvents control to the page and handle its client-side ControlsInitialized and EndCallback events. In the handlers, use the corresponding jQuery selectors to initialize the specifed draggable and droppable items. Use the start event handler to obtain the dragged row's key value and apply style settings to that row based on a condition.

start: function (ev, ui) {
    var $sourceElement = $(ui.helper.context);
    var $draggingElement = $(ui.helper);
    // Style elements
    $sourceElement.addClass("draggingStyle");
    $draggingElement.addClass("draggingStyle");
    // Find the row's key value
    var sourceGrid = ASPxClientGridView.Cast($draggingElement.hasClass("left") ? "gridFrom" : "gridTo");
    rowKey = sourceGrid.GetRowKey($sourceElement.index() - 1);
}

Handle the drop event of the droppable items to send a callback to the callback panel to configure the grid's edit functionality.

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)
• script.js (VB: script.js)

• Grid View for ASP.NET Web Forms - Reorder Grid Rows Using Buttons and Drag-and-Drop
• Grid View for ASP.NET MVC - How to use jQuery to drag and drop items from one grid to another

(you will be redirected to DevExpress.com to submit your response)