The GridView Row Drag Overlay Extender

I finally got a chance to play with the Ajax futures release over the weekend.  The controls look very impressive!
Just for fun, I wrote a simple drag overlay extender that allows you to drag and drop rows in/across  GridViews.

Row Drag Overlay

Anytime a Gridview row is dragged and dropped onto another row or header, a post back occurs raising a RowDrop event with details about the rowIndex and GridView where the drag started and where it was dropped onto.

Initially, the drag in IE 6/7 was sluggish. It looks like when you register a drop target using the Sys.Preview.UI.DragDropManager.registerDropTarget method, a reference to the DOM element is stored in an internal array. When a drag is in progress, IE continuously loops through the array of registered dropped  targets looking for a potential drop target. This is done by calculating the bounds of each element in the array with the help of the Sys.UI.DomElement.getBounds method. This seemed to make IE sluggish.

The workaround I have in the sample code, which should work in most simple scenarios, is to store the bounds of each element as an expando property of the element so that on subsequent loops, it is fetched from the property rather than being calculated again. The sample contains the original implementation and the one with the tweak. The tweak is stored in a js file in the Scripts folder.

Note that the Ajax Control Toolkit already contains a cool ReorderList control.

You can download my sample here (look under Flan Future AJAX Controls):
Primary

Mirror

v.0.0.3 Updated to fix the duplicate data issue
Please note that this code was written for .NET 2.0

53 Comments

  • Raj,

    Real cool ! Is it possible to drag-drop the Columns in the same girdview using this extender ?

    Thanks,

    Gopi

  • Gopi,

    It is not possible to do that with this extender. Sorry.

  • I am trying to run your sample site but everytime I run it I get this error.

    Could not load file or assembly 'Microsoft.Web.Preview, Version=1.1.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified.

    What am I doing wrong?

  • Jesus,
    You need the Ajax futures release - http://www.asp.net/downloads/futures/

  • The datagrid row sample is exactly what I have been looking for.

    I have the futures set installed and loaded up your project in Visual Web developer, however it throws an error about the type of project when I open it. Can you provide the complied binaries from your Futures samples so I can add the dll directly?

    Thanks

  • I am trying to run your sample site but everytime I run it I get this error.

    Could not load file or assembly 'Microsoft.Web.Preview, Version=1.1.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified.

    i have Ajax futures and installed it , but it si still giving error

  • Hi i wasn't able to download your sample gridview.???

  • Alex,
    When testing the Futures June 2007 release, I did not notice the sluggishness so I took out the tweak. Since you have noticed the issue with IE, you may want to download v 0.0.1. I hope the ASP.net fixes the problem soon.

    Raj

  • Hi,The sample works fine. It should the original index before the drag and the new index after the drop, but the grid view itself is not repainted. Meaning the row stays in the same location. Is there a way to really simulate the drag/drop

  • >Meaning the row stays in the same location

    Ray,

    The extender only gives you information about the drag-drop that occurs. It is left to you to decide what you want to do with that information.

    ie. You could make changes to the DB with that information.

  • Alex,

    I am using the Drag Overlay Extender in a content area, and I also had issues with the location of the FloatTable. When setting the FloatTable location, I adjusted the current location by the offsetWidth of my sidebar content area, and the offsetHeight of my header content area, and all is well.

  • Raj,
    Thanks for the great code. Can we drag and drop multiple rows at a time?

    Thanks,
    Satish

  • how to lock the Row Drag

    any events are availble in your control

  • You mentioned that it's possible to drag between two gridviews. However I've not been able to get the event to fire when I drag a row to another gridview. Did I misunderstand what it could do? It works as intended when dragging from within the gridview for me.

  • Daniel,
    Did you try the sample?
    Raj

  • Hi Raj
    This is working great.can you guide me how can i add a javascript into this as when i am tring to add onclick of any row in gridview it is not working and let me know how can i change the cursor to hand.

  • Sounds like a really usefull extender, do you have a running live demo in your own controlled environment, where people that have problems can test your code on their own machine against your fully working live sample - and compare, thanks good job

  • strange, why I could not post?
    I am having the same problem Steve had, did you test it with textbox in Gridview row?

  • I am now able to reproduce the issue. Any form element in a drag row gets duplicated when a drag occurs. I shall post a fix as soon as I figure out the issue. Thanks for your patience.

  • Hello Raj
    Can we use extender with some other kind of grid beside Gridview type. I m using special grid called HierarGrid. This extender is not working with this grid? Any workaround

    Thanks

  • Raj,

    Great extender. Been looking for something like this for GridView. Having an issue where it seems the overlay is not centered over the GridView. Any thoughts on what I can do to fix?

    Ron

  • Any update on the textbox in gridview row issue? I am waiting to use it.
    thanks

  • The control has been updated to fix the duplicate data bug.

  • Worked like a charm, thanks.

  • Hi, Great control. However, I've got a problem building in 3.5. I (think) I fixed the .config but can't fix the scriptreferencies. I directly tried the following (exchanging Microsoft.web.preview).

    ScriptReference reference = new ScriptReference("PreviewScript.js", "System.Web.Extensions");

    But it doesn't work. Where are the *.js-files in framework 3.5?

    //Thanks

  • Where can I find the link to downLoad the GridView Row Drag Overlay Extender, I clicked on "Pimary and Mirror" links as instructed and downloaded Flan controls but this extender is not included in the download?

  • May,
    Please look under Flan Future AJAX Controls.

  • Have you tried the GridView Row Drag Overlay Extender in framework 3.5? As I wrote on december 21 I can't get the scriptreferencies to work.
    thanks

  • when i drag an item the source is displayed but not the drop location. What might be the cause of this? And thank you.

  • anybody know how to convert this to VB

    litSourcePK.Text = ((GridView)Page.FindControl(e.SourceGridViewID)).DataKeys[e.SourceRowIndex].Value.ToString();

  • @ Michael Moore

    litSourcePK.Text = CType(Page.FindControl(e.SourceGridViewID),GridView).DataKeys(e.SourceRowIndex).Value.ToString

  • Looks like i found a problem: i do not seem to be able to move/insert a gridview row after the last row in gridview. The workaround is to move/insert a row before the last row and then move the last row in front of inserted one. Has anyone found any solutions to this problem?

    Otherwise, this extender works pretty good.

    I even extended it further: I added CSS support for "insert indicator" (originally blue line) and dragged row (originally white background with 0.75 opacity). I also added property DroppableHere - sometimes you do not wish to be able to drop a row somewhere (only to pick it), so setting this parameter to "true" prevents it.

    If anyone is interested in this extension, i will post a link.

  • Thanks for this sample, it works great except some delay on I7 , but it's fine.
    Is it possible to get the dll source code.
    Thanks,

  • is it possible to get the dll code, i impelemented the sample, it works good, the only issue i have is to avoid dropping to the first row in the gridview.
    Thanks,

  • Hi

    I downloaded ur application but im getting some error

    unknownserver tag
    How to include into my present project.

    Plz help me out

    Thanx
    Sandhya

  • What it takes to convert this extender to be used with asp.net listview control?

  • Hey guys I can't run this example, because of the "Could not load file or assembly 'Microsoft.Web.Preview, Version=1.1.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified." Issue, I already install the the ajax futures and still have the error, any help with this???.

  • Works great in 2.0. But how to get it working in 3.5?

  • Hi Sandhya,

    The application is working perfectly. You can open it as, "Open Solution...". But Before You must have latest asp.net ajax ctp and add reference to FlanControls Assembly. If any problem then tell again.

  • Hi Raj,
    The Gridview is not upgrading, it seems nothing is happening.
    What can I do?
    Thanks

  • Hi,
    This is working fine in I.E and Mozilla but when i am in safari and scroll the page to bottom this is working but the blue line goes to top means not foucusing on particuler row which i drag...Please help me.Waiting for reply

  • Hey guys I too can't run this example, because of the "Could not load file or assembly 'Microsoft.Web.Preview, Version=1.1.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified." Issue, I already install the the ajax futures and still have the error, any help with this???.

  • Hi Raj,
    Congratulations per this very nice control. I need Drag a row and drop over a Cell, how can I do this? is it possible? what files must I modify?

    Thanks

  • Hi,
    Great control but I've faced troubles with safari, is this a know issue regarding this control? I can drag it to every but I can't drop it on any destination grid, please can you provide some help?
    Regards,
    Jonathan

  • Hi Raji,

    What is dependencies on .NET Future relase package(Microsoft.Web.Preview.dll).

    Is there any way to remove the dependencies from the future release package?

    I want to use your control on the project, but I do not want to deploy the future relase package in the production servers.

    Thank you for providing a such a great control!!

  • Hi Raj,

    Thanks for this extender! It's working well for me except for one small problem - the RowDropEventArgs always contain the same values everytime I do a drag and drop - 0. Any ideas?

  • Sehr wertvolle Informationen! Empfehlen!

  • Is there a version for Framework 3.5?
    thanks

  • Hi,

    Does anyone know how to disable feature of dragging and drop between the tables?

    Regards,
    Dongonzales

  • Hi,

    is it possible to use this with the 3.5 framework? I have been trying but I get an exception (Input string was not in a correct format)

    Thank you.

  • Hello Raj,
    I downloaded your source code and am able to view the grid in my browser. However, when I drag a row, it does not reposition itself. It just stays where it was. I do see the postback and also the row id that was dragged from and draggged to. This information is displayed above the grid. Would you please help me out? Your feedback and time are highly appreciated. My e-mail address is birenajmera@hotmail.com

  • Hi Raj,
    I am facing a problem for position of floating table. When my aspx page gets loaded, the initial rows in the Gridview displayed without scrolling down on the page, then the floating table's position is correct. But once I scroll down vertically on my page, the floating table is not coming at the desired location.

  • I love this control! Thank you so much for sharing.
    I ran into a CSS bug while using it in a website that has a centered div with the attribute "margin:0 auto 0 auto;".  The centered div is several levels up in the website from the grid that is being sorted. When i remove the auto margins the dragged rows line up perfectly, but when the div is centered the dragged row marker (the blue line) is lined up in the wrong place. Is there a quick fix for this?

  • Hello, I can drag the record, but when I drop it, it doesn't change its position, actually, nothing happened, I can see it dragged but when I let it go, it remains in its old position, however, the table at the top of the page is updated correctly, but I don't see the results, am I missing something here?thx.

Comments have been disabled for this content.