BuyLog In
Example E1810
Visible to All Users

Grid View for ASP.NET Web Forms - How to use jQuery to drag and drop items from one grid to another

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

Drag and drop grid rows

Overview

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

ASPx
<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.

JavaScript
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(https://github.com/DevExpress-Examples/asp-net-web-forms-grid-use-jquery-to-drag-and-drop-rows/tree/13.2.9%2B/) - 1);  
}

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

Files to Review

More Examples

Example Code

Default.aspx 
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>









<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        td
        {
            vertical-align: top;
        }

        .draggingStyle
        {
            background-color: lightblue;
        }

        .targetGrid
        {
            background-color: lightcoral;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="jquery.ui.touch-punch.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:ASPxCallbackPanel ID="cbPanel" runat="server" ClientInstanceName="cbPanel" OnCallback="cbPanel_Callback">
                <PanelCollection>
                    <dx:PanelContent runat="server">
                        <table>
                            <tr>
                                <td>
                                    <dx:ASPxGridView ID="GridFrom" ClientInstanceName="gridFrom" runat="server" AutoGenerateColumns="False" KeyFieldName="CategoryID" Width="500">
                                        <Columns>
                                            <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
                                            </dx:GridViewDataTextColumn>
                                            <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
                                            </dx:GridViewDataTextColumn>
                                            <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
                                            </dx:GridViewDataTextColumn>
                                        </Columns>
                                        <Styles>
                                            <Table CssClass="droppableLeft"></Table>
                                            <Row CssClass="draggableRow left"></Row>
                                        </Styles>
                                    </dx:ASPxGridView>
                                </td>
                                <td>
                                    <dx:ASPxGridView ID="GridTo" ClientInstanceName="gridTo" runat="server" Width="500" KeyFieldName="CategoryID">
                                        <Columns>
                                            <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
                                            </dx:GridViewDataTextColumn>
                                            <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
                                            </dx:GridViewDataTextColumn>
                                            <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
                                            </dx:GridViewDataTextColumn>
                                        </Columns>
                                        <Styles>
                                            <Table CssClass="droppableRight"></Table>
                                            <Row CssClass="draggableRow right"></Row>
                                        </Styles>
                                    </dx:ASPxGridView>
                                </td>
                            </tr>
                        </table>

                    </dx:PanelContent>
                </PanelCollection>
            </dx:ASPxCallbackPanel>
            <dx:ASPxGlobalEvents ID="ge" runat="server">
                <ClientSideEvents ControlsInitialized="OnControlsInitialized" EndCallback="OnControlsInitialized" />
            </dx:ASPxGlobalEvents>
        </div>
    </form>
</body>
</html>
Default.aspx.cs 
C#
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;

public partial class _Default : System.Web.UI.Page {
    Helper helper = new Helper();
    protected void Page_Init(object sender, EventArgs e) {
        if (!IsPostBack)
            Session.Clear();

        helper.BindGrids(GridFrom, GridTo);

    }
    protected void cbPanel_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
        var rowKey = e.Parameter.Split('|')[0];
        var leftToRight = Convert.ToBoolean(e.Parameter.Split('|')[1]);

        var source = leftToRight ? helper.GetDraggableDataSource() : helper.GetDroppableDataSource();
        var target = leftToRight ? helper.GetDroppableDataSource() : helper.GetDraggableDataSource();

        //update target datasource
        var sourceRow = source.AsEnumerable()
            .Where(x => x.Field<int>("CategoryID") == Convert.ToInt32(rowKey))
            .SingleOrDefault();
        target.ImportRow(sourceRow);

        //remove source data
        source.Rows.Remove(sourceRow);

        GridFrom.DataBind();
        GridTo.DataBind();
    }
}
script.js 
JavaScript
var rowKey = -1;

function OnControlsInitialized(s, e) {
    $('.draggableRow').draggable({ //http://api.jqueryui.com/draggable/
        helper: 'clone',
        start: function (ev, ui) {
            var $sourceElement = $(ui.helper.context);
            var $draggingElement = $(ui.helper);
            var sourceGrid = ASPxClientGridView.Cast($draggingElement.hasClass("left") ? "gridFrom" : "gridTo");

            //style elements
            $sourceElement.addClass("draggingStyle");
            $draggingElement.addClass("draggingStyle");
            $draggingElement.width(sourceGrid.GetWidth());

            //find key
            rowKey = sourceGrid.GetRowKey(sourceGrid.GetTopVisibleIndex() + $sourceElement.index() - 1);
        },
        stop: function (e, ui) {
            $(".draggingStyle").removeClass("draggingStyle");
        }
    });

    var settings = function (className) {
        return {
            tolerance: "intersect",
            accept: className,
            drop: function (ev, ui) {
                $(".targetGrid").removeClass("targetGrid");
                var leftToRight = ui.helper.hasClass("left");
                cbPanel.PerformCallback(rowKey + "|" + leftToRight);
            },
            over: function (ev, ui) {
                $(this).addClass("targetGrid");
            },
            out: function (ev, ui) {
                $(".targetGrid").removeClass("targetGrid");
            }
        };
    };

    //http://api.jqueryui.com/droppable/
    $(".droppableLeft").droppable(settings(".right"));
    $(".droppableRight").droppable(settings(".left"));

}

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.