Click here to Skip to main content
11,432,627 members (66,798 online)
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 Pin
Member 108754428-Oct-14 6:55
memberMember 108754428-Oct-14 6:55 
QuestionDrag And Drop GridView Jquery Pin
amit_jain_online22-Apr-12 23:56
memberamit_jain_online22-Apr-12 23:56 
AnswerRe: Drag And Drop GridView Jquery Pin
Rupesh Burad23-Apr-12 19:31
memberRupesh Burad23-Apr-12 19:31 
GeneralMy vote of 1 Pin
Daniel Groh18-Jul-11 2:04
memberDaniel Groh18-Jul-11 2:04 
QuestionProblem with MasterPages and Content Sections... :( Pin
Zubair53020-Jun-11 10:42
memberZubair53020-Jun-11 10:42 
Questiondraganddrop event doesn't fire in vb.net? Pin
kelmeister10-Feb-11 11:37
memberkelmeister10-Feb-11 11:37 
GeneralCSS or SkinID for DragAndDropGridView Pin
Rodrigo Esparza3-Nov-10 6:58
memberRodrigo 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) Pin
Rodrigo Esparza21-Oct-10 6:09
memberRodrigo 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) Pin
Rodrigo Esparza21-Oct-10 7:08
memberRodrigo 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] Pin
Rupesh Burad21-Oct-10 19:13
memberRupesh Burad21-Oct-10 19:13 
GeneralRe: Postback do not raise with drag and drop, only raise event on simple click.... (I'm using the sample code) Pin
Rupesh Burad21-Oct-10 19:51
memberRupesh Burad21-Oct-10 19:51 
GeneralRe: Postback do not raise with drag and drop, only raise event on simple click.... (I'm using the sample code) [modified] Pin
Rodrigo Esparza22-Oct-10 5:36
memberRodrigo Esparza22-Oct-10 5:36 
GeneralRe: Postback do not raise with drag and drop, only raise event on simple click.... (I'm using the sample code) Pin
Rupesh Burad23-Oct-10 23:55
memberRupesh Burad23-Oct-10 23:55 
GeneralMasterPage Pin
Member 450684514-Aug-10 4:22
memberMember 450684514-Aug-10 4:22 
GeneralRe: MasterPage Pin
Rupesh Burad15-Aug-10 19:50
memberRupesh Burad15-Aug-10 19:50 
Generalin Paging its not working Pin
umesh0930-Jun-10 6:54
memberumesh0930-Jun-10 6:54 
GeneralRe: in Paging its not working Pin
Rupesh Burad30-Jun-10 21:54
memberRupesh Burad30-Jun-10 21:54 
Generalchanging checkbox triggers drag drop, Checkbox value not available in codebehind Pin
micheljansen1-Sep-09 4:10
membermicheljansen1-Sep-09 4:10 
GeneralRe: changing checkbox triggers drag drop, Checkbox value not available in codebehind Pin
Richard Johansson15-Sep-09 10:20
memberRichard Johansson15-Sep-09 10:20 
GeneralRe: changing checkbox triggers drag drop, Checkbox value not available in codebehind Pin
micheljansen16-Sep-09 8:51
membermicheljansen16-Sep-09 8:51 
GeneralRe: changing checkbox triggers drag drop, Checkbox value not available in codebehind Pin
Rupesh Burad19-Oct-09 20:39
memberRupesh Burad19-Oct-09 20:39 
QuestionHow to make it work with a gridview and a sqldatasource Pin
Kaeghl27-Aug-09 12:48
memberKaeghl27-Aug-09 12:48 
QuestionCant seem to get draganddrop event to fire [modified] Pin
Matt Jorgenson28-Jun-09 13:44
memberMatt Jorgenson28-Jun-09 13:44 
GeneralDrag and Drop drop in a paged view of grid control Pin
gayatri.neelema13-Jan-09 2:10
membergayatri.neelema13-Jan-09 2:10 
GeneralRe: Drag and Drop drop in a paged view of grid control Pin
Rupesh Burad1-Jun-09 0:58
memberRupesh Burad1-Jun-09 0:58 
GeneralDragDropGridView MaterPage Pin
gretafan17-Dec-08 1:38
membergretafan17-Dec-08 1:38 
AnswerRe: DragDropGridView MaterPage Pin
Zonkd81-Jun-12 11:26
memberZonkd81-Jun-12 11:26 
Generalusing DragDropGridView in ShowModalDialog Pin
gate.6.6.625-Sep-08 12:40
membergate.6.6.625-Sep-08 12:40 
GeneralRe: using DragDropGridView in ShowModalDialog Pin
Seth Smith21-May-09 12:31
memberSeth Smith21-May-09 12:31 
Generaldrag and drop the rows in gridview Pin
chinnuk22-Sep-08 1:35
memberchinnuk22-Sep-08 1:35 
GeneralRe: drag and drop the rows in gridview Pin
gate.6.6.625-Sep-08 12:46
membergate.6.6.625-Sep-08 12:46 
QuestionFirefox Compatable? Pin
razzzzer21-Aug-08 15:02
memberrazzzzer21-Aug-08 15:02 
AnswerRe: Firefox Compatable? Pin
Rupesh Burad19-Oct-09 20:44
memberRupesh Burad19-Oct-09 20:44 
GeneralUsing DragDropGridView along with AjaxControlToolkit Pin
DMCMA29-Jul-08 5:59
memberDMCMA29-Jul-08 5:59 
GeneralRe: Using DragDropGridView along with AjaxControlToolkit Pin
DMCMA29-Jul-08 6:00
memberDMCMA29-Jul-08 6:00 
GeneralUsing DragDropGridView along with AjaxControlToolkit Pin
DMCMA28-Jul-08 8:39
memberDMCMA28-Jul-08 8:39 
GeneralRe: Using DragDropGridView along with AjaxControlToolkit Pin
hnell23-Feb-11 1:48
memberhnell23-Feb-11 1:48 
Question"DragAndDrop" is null on drop action Pin
Erik Bertrand3-Jul-08 6:49
memberErik Bertrand3-Jul-08 6:49 
AnswerRe: "DragAndDrop" is null on drop action Pin
Rupesh Burad3-Jul-08 22:08
memberRupesh Burad3-Jul-08 22:08 
AnswerRe: "DragAndDrop" is null on drop action Pin
Erik Bertrand7-Jul-08 6:27
memberErik Bertrand7-Jul-08 6:27 
GeneralRe: "DragAndDrop" is null on drop action Pin
Izzyvef3-Feb-09 2:39
memberIzzyvef3-Feb-09 2:39 
AnswerRe: "DragAndDrop" is null on drop action Pin
Izzyvef3-Feb-09 2:37
memberIzzyvef3-Feb-09 2:37 
Generaldrag row to another grid Pin
Member 5166589-May-08 10:20
memberMember 5166589-May-08 10:20 
GeneralRe: drag row to another grid Pin
Rupesh Burad2-Jun-08 1:16
memberRupesh Burad2-Jun-08 1:16 
GeneralReOrder Grid [modified] Pin
Mark Henke18-Dec-07 7:58
memberMark Henke18-Dec-07 7:58 
GeneralRe: ReOrder Grid Pin
Rupesh Burad16-Apr-08 0:37
memberRupesh Burad16-Apr-08 0:37 

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
Web04 | 2.8.150428.2 | Last Updated 10 Dec 2007
Article Copyright 2007 by Rupesh Burad
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid