The GridView Row Drag Overlay Extender - Raj Kaimal

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

Published Wednesday, June 13, 2007 8:41 PM by rajbk

Comments

# re: The GridView Row Drag Overlay Extender

Raj,

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

Thanks,

Gopi

Wednesday, June 13, 2007 10:40 PM by Gopinath

# re: The GridView Row Drag Overlay Extender

Gopi,

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

Wednesday, June 13, 2007 10:52 PM by rajbk

# re: The GridView Row Drag Overlay Extender

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?

Wednesday, August 29, 2007 5:03 PM by Jesus

# re: The GridView Row Drag Overlay Extender

Jesus,

You need the Ajax futures release - www.asp.net/.../futures

Thursday, August 30, 2007 7:52 AM by rajbk

# re: The GridView Row Drag Overlay Extender

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

Saturday, September 1, 2007 1:20 AM by Terry

# re: The GridView Row Drag Overlay Extender

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

Saturday, September 1, 2007 7:51 AM by sunil

# re: The GridView Row Drag Overlay Extender

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

Thursday, September 13, 2007 7:17 AM by doors

# re: The GridView Row Drag Overlay Extender

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

Wednesday, September 19, 2007 11:30 AM by rajbk

# re: The GridView Row Drag Overlay Extender

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

Wednesday, September 26, 2007 5:13 AM by Ray

# re: The GridView Row Drag Overlay Extender

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

Thursday, September 27, 2007 11:53 AM by rajbk

# re: The GridView Row Drag Overlay Extender

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.

Friday, October 5, 2007 4:11 PM by Sherri

# re: The GridView Row Drag Overlay Extender

Raj,

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

Thanks,

Satish

Wednesday, October 17, 2007 5:13 PM by Satish

# re: The GridView Row Drag Overlay Extender

how to lock the Row Drag

any events are availble in your control

Monday, October 22, 2007 11:57 AM by Mohan

# re: The GridView Row Drag Overlay Extender

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.

Saturday, November 3, 2007 6:35 PM by Daniel

# re: The GridView Row Drag Overlay Extender

Daniel,

Did you try the sample?

Raj

Saturday, November 3, 2007 11:16 PM by rajbk

# re: The GridView Row Drag Overlay Extender

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.

Wednesday, November 7, 2007 1:22 AM by simar

# re: The GridView Row Drag Overlay Extender

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

Saturday, November 10, 2007 1:09 AM by Hakan

# re: The GridView Row Drag Overlay Extender

strange, why I could not post?

I am having the same problem Steve had, did you test it with textbox in Gridview row?

Sunday, November 11, 2007 3:42 PM by davidw

# re: The GridView Row Drag Overlay Extender

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.

Monday, November 12, 2007 1:09 AM by rajbk

# re: The GridView Row Drag Overlay Extender

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

Friday, November 16, 2007 10:38 PM by Max

# re: The GridView Row Drag Overlay Extender

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

Tuesday, November 20, 2007 11:13 AM by Ron

# re: The GridView Row Drag Overlay Extender

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

thanks

Tuesday, November 20, 2007 2:18 PM by davidw

# re: The GridView Row Drag Overlay Extender

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

Sunday, December 2, 2007 10:46 PM by rajbk

# re: The GridView Row Drag Overlay Extender

Worked like a charm, thanks.

Tuesday, December 4, 2007 5:28 PM by Alex A

# re: The GridView Row Drag Overlay Extender

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

Friday, December 21, 2007 3:44 AM by Petter A

# re: The GridView Row Drag Overlay Extender

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?

Thursday, December 27, 2007 3:21 PM by May

# re: The GridView Row Drag Overlay Extender

May,

Please look under Flan Future AJAX Controls.

Thursday, December 27, 2007 8:06 PM by rajbk

# re: The GridView Row Drag Overlay Extender

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

Monday, January 7, 2008 9:12 AM by Petter A

# re: The GridView Row Drag Overlay Extender

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

Wednesday, March 19, 2008 5:37 PM by Michael Moore

# re: The GridView Row Drag Overlay Extender

anybody know how to convert this to VB

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

Thursday, March 20, 2008 1:00 PM by Michael Moore

# re: The GridView Row Drag Overlay Extender

@ Michael Moore

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

Tuesday, April 15, 2008 4:38 PM by redriver

# re: The GridView Row Drag Overlay Extender

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.

Wednesday, April 16, 2008 3:27 PM by ico

# re: The GridView Row Drag Overlay Extender

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,

Thursday, May 1, 2008 3:57 PM by Med

# re: The GridView Row Drag Overlay Extender

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,

Thursday, May 1, 2008 5:30 PM by Med

# re: The GridView Row Drag Overlay Extender

Hi

I downloaded ur application but im getting some error

unknownserver tag <cc1:RowDragOverlayExtender>

How to include into my present project.

Plz help me out

Thanx

Sandhya

Thursday, May 8, 2008 8:24 AM by sandhyabhavani

# re: The GridView Row Drag Overlay Extender

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

Friday, June 20, 2008 3:47 PM by Uma

# re: The GridView Row Drag Overlay Extender

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

Monday, June 23, 2008 12:30 PM by Rob

# re: The GridView Row Drag Overlay Extender

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

Tuesday, June 24, 2008 3:23 AM by Erlend

# re: The GridView Row Drag Overlay Extender

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.

Tuesday, June 24, 2008 5:11 AM by mayur

# re: The GridView Row Drag Overlay Extender

Hi Raj,

The Gridview is not upgrading, it seems nothing is happening.

What can I do?

Thanks

Wednesday, July 2, 2008 5:25 PM by Dan Lopes

# re: The GridView Row Drag Overlay Extender

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

Thursday, July 3, 2008 5:20 AM by Simar

# re: The GridView Row Drag Overlay Extender

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

Wednesday, July 9, 2008 3:29 AM by ram02455

# re: The GridView Row Drag Overlay Extender

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

Tuesday, July 15, 2008 6:13 AM by Didier

# re: The GridView Row Drag Overlay Extender

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

Tuesday, August 5, 2008 5:52 PM by Jonathan

# re: The GridView Row Drag Overlay Extender

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!!

Monday, September 8, 2008 2:21 PM by tak

# re: The GridView Row Drag Overlay Extender

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?

Monday, January 26, 2009 2:18 PM by Patrick

# re: The GridView Row Drag Overlay Extender

Sehr wertvolle Informationen! Empfehlen!

Thursday, March 12, 2009 8:55 AM by ...

# re: The GridView Row Drag Overlay Extender

Is there a version for Framework 3.5?

thanks

Thursday, March 26, 2009 1:27 PM by savaha

# re: The GridView Row Drag Overlay Extender

Hi,

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

Regards,

Dongonzales

Thursday, April 9, 2009 9:53 AM by Dongonzales

# re: The GridView Row Drag Overlay Extender

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.

Sunday, April 26, 2009 5:01 PM by Jens

# re: The GridView Row Drag Overlay Extender

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

Friday, May 29, 2009 6:21 PM by biren ajmera

# re: The GridView Row Drag Overlay Extender

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.

Wednesday, December 2, 2009 5:04 AM by Amy

# re: The GridView Row Drag Overlay Extender

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?

Saturday, February 27, 2010 5:31 PM by Noel

# re: The GridView Row Drag Overlay Extender

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.

Sunday, July 18, 2010 9:31 AM by Rtawfik