Click here to Skip to main content
Click here to Skip to main content

Drag and drop GridView items for ordering, in ASP.NET 2.0

, 9 Dec 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Drag and drop GridView items for re-ordering of the items.

Screenshot -

Screenshot -

Introduction

In DragAndDropGridView, the user can rearrange a grid item via dragging and dropping. The user can drag a gridview item and then drop it on the item where he/she wishes to swap with. This control is very helpful for large grid items where we require to order items within the grid.

Using the code

Add the control to the toolbar or add a reference to Utility.dll in your project. Then, bind with the data source which you need to order. Now, add the DragAndDropEvent handler. DragAndDropEventArgs gives you the start index (source row index) and the EndIndex (destination row index). With these indices, update the data source and rebind the grid.

How this control works

This control is inherits from the GridView so that we can benefit from the GridView features.

HandleRow event

Handle the mouse down and mouse up events of each row in the gridview:

protected override void OnRowDataBound(GridViewRowEventArgs e)
{
    base.OnRowDataBound(e);
   //set the java script method for the dragging

    e.Row.Attributes.Add("onmousedown", "startDragging" + 
                         this.ClientID + "(" + e.Row.RowIndex + ",this); ");
    e.Row.Attributes.Add("onmouseup", "stopDragging" + 
                         this.ClientID + "(" + e.Row.RowIndex + "); ");
}

Whenever the user clicks on a grid item, a div is added in the body and the innerHTML of the div copies the selected item. Now, set the document mouse move event for the moving item.

document.onmousemove = function ()
{
    if(__item" + this.ClientID + @" != null){
        __item" + this.ClientID + @".style.left=  
          window.event.clientX + document.body.scrollLeft + 
          document.documentElement.scrollLeft ;
        __item" + this.ClientID + @".style.top =   
          window.event.clientY + document.body.scrollTop + 
          document.documentElement.scrollTop ;
      }
}

When the user ends up on another grid item, we call stopDragging(). This method calls the post back event.

Register the post back event script

The __doPostBack method is not added into the page until we register the post back event on the client-side by calling the Page.ClientScript.GetPostBackEventReference(this, "") method, which will create the __doPostback method on the client side.

Raise the post back event

Handle the RaisePostBackEvent of the control for raising the drag and drop events:

protected override void RaisePostBackEvent(string eventArgument)
{
    base.RaisePostBackEvent(eventArgument);
    //Handle the post back event

    //and set the values of the source and destination items

    if (Page.Request["__EVENTARGUMENT"] != null && 
        Page.Request["__EVENTARGUMENT"] != "" && 
        Page.Request["__EVENTARGUMENT"].StartsWith("GridDragging"))
    {
        char[] sep = { ',' };
        string[] col = eventArgument.Split(sep);
        DragAndDrop(this, new DragAndDropEventArgs(Convert.ToInt32(col[1]), 
                    Convert.ToInt32(col[2])));
    }
}

DragAndDropEventArgs

This EventArgs contains the start and the end index for the dragging event:

public class DragAndDropEventArgs : EventArgs
{
    private int _startIndex;
    /// <span class="code-SummaryComment"><summary></span>
    /// Index of the source item
    /// <span class="code-SummaryComment"></summary></span>

    public int StartIndex
    {
        get { return _startIndex; }
    }

    private int _endIndex;
    /// <span class="code-SummaryComment"><summary></span>
    /// Index of the destination item
    /// <span class="code-SummaryComment"></summary></span>

    public int EndIndex
    {
        get { return _endIndex; }

    }
    public DragAndDropEventArgs(int startIndex, int endindex)
    {
        _startIndex = startIndex;
        _endIndex = endindex;
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rupesh Burad
Team Leader Nagarro Software Pvt Ltd.
India India
No Biography provided

Comments and Discussions

 
QuestionMerged Cells in Grid view PinmemberMember 108754428-Oct-14 6:55 
QuestionDrag And Drop GridView Jquery Pinmemberamit_jain_online22-Apr-12 23:56 
AnswerRe: Drag And Drop GridView Jquery PinmemberRupesh Burad23-Apr-12 19:31 
GeneralMy vote of 1 PinmemberDaniel Groh18-Jul-11 2:04 
QuestionProblem with MasterPages and Content Sections... :( PinmemberZubair53020-Jun-11 10:42 
Questiondraganddrop event doesn't fire in vb.net? Pinmemberkelmeister10-Feb-11 11:37 
GeneralCSS or SkinID for DragAndDropGridView PinmemberRodrigo Esparza3-Nov-10 6:58 
GeneralPostback do not raise with drag and drop, only raise event on simple click.... (I'm using the sample code) PinmemberRodrigo Esparza21-Oct-10 6:09 
GeneralRe: Postback do not raise with drag and drop, only raise event on simple click.... (I'm using the sample code) PinmemberRodrigo Esparza21-Oct-10 7:08 
GeneralRe: Postback do not raise with drag and drop, only raise event on simple click.... (I'm using the sample code) [modified] PinmemberRupesh Burad21-Oct-10 19:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150327.1 | Last Updated 10 Dec 2007
Article Copyright 2007 by Rupesh Burad
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid