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

# 本周ASP.NET英文技术文章推荐[06/10 - 06/16]

摘要本期共有4篇文章(目前ASP.NET日渐凋敝阿,这么少东西都不好意思拿出来,以后不如改成两周推荐一次了):如何根据需要加载某一Tab中的内容ManageStylesTool窗口让Gr...

Friday, June 15, 2007 6:16 AM by Dflying Chen

# links for 2007-06-15 » mhinze.com

Pingback from  links for 2007-06-15 » mhinze.com

Friday, June 15, 2007 11:30 AM by links for 2007-06-15 » mhinze.com

# 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 01, 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 01, 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

Hi! Thanks a lot for this, exactly what I was looking for. One thing though: while I drag an element IE becomes a little sluggish. I noticed you mentionned this issue but then, your text is strikethrough so I believe your workaround is no longer valid. Have you solve this problem?

Thanks

Wednesday, September 19, 2007 9:43 AM by Alex

# 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

Thanks Raj

The tweak reduced the sluggishness but it's still a little slow; I hope ASP.NET fixes the problem too!

One other thing, my Website uses framesets which seems to cause some problems with the RowDragOverlay as there is a gap, while dragging, between the FloatTable and the cursor vertical position. Have you any idea how I could solve this?

Thanks again for your excellent work

Thursday, September 20, 2007 9:44 AM by Alex

# 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 05, 2007 4:11 PM by Sherri

# re: The GridView Row Drag Overlay Extender

This is a great control, however I'm having a bit of an issue with it.

I've writen a Custom GridView that allows edit of all rows that are on the view at the same time.  So that means that all the rows have input boxes active all at the same time.  the draging of rows works perfectly, but the drag screws up the content in the input boxes.  for example, If an input box has the value of "Hello" and I drag that row, then the value being sent to the server on the drop is "Hello,Hello"  It looks like the javascript is joining the value twice,  Once might be comming from the form and once from the javascript.  I'm not exactly sure since I haven't looked at the javascript code yet.  Does anyone have any suggestions where I should look for the issue?

Thank you.

Thursday, October 11, 2007 10:41 AM by Steve

# re: The GridView Row Drag Overlay Extender

That's the version I am using.  I looked at the description of bug reported and it doesn't look like it's the same bug.  It's simila but not exactly the same.

I've debugged what is happening, and have trace the duplicate values being posted back to having multiple(Once from the GridView and once from the floatTable) input fields being posted back to the server.

In the javascript the hideVisuals function is called twice.  Once before the postback event and once after.  For some reason floatTable variable is null on the call to the function before the postback and not null on the call after.  So the floatTable row gets posted back to the server and then gets cleared afterward.

I have fixed it in a somewhat dirty way, but it works.  In the createFloatTable function, I assign an Id to the floatTable and in the hideVisuals I use getElementById to get the floatTable and then remove it.

It's not exactly the cleanest way since I'm not keeping it OO, but I really didn't have the time to figure out why the floatTable was null on the first call to hideVisuals.

Monday, October 15, 2007 10:32 AM by Steve

# 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 03, 2007 6:35 PM by Daniel

# re: The GridView Row Drag Overlay Extender

Daniel,

Did you try the sample?

Raj

Saturday, November 03, 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 07, 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

# The GridView Row Drag Overlay Extender

Pingback from  The GridView Row Drag Overlay Extender

Wednesday, November 28, 2007 8:51 AM by The GridView Row Drag Overlay Extender

# re: The GridView Row Drag Overlay Extender

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

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

# re: The GridView Row Drag Overlay Extender

Worked like a charm, thanks.

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

# 【收藏】本周ASP.NET英文技术文章推荐[06/10 - 06/16]

摘要

本期共有4篇文章(目前ASP.NET日渐凋敝阿,这么少东西都不好意思拿出来,以后不如改成两周推荐一次了): 如何根据需要加载某一Tab中的内容

ManageStylesToo...

Friday, December 14, 2007 12:19 AM by Jacky_Xu

# 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

# Webmaster 38 » Blog Archive » Row Drag overlay for .net at ajax scripts compound

Pingback from  Webmaster 38  » Blog Archive   »       Row Drag overlay for .net at  ajax scripts compound

# 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 07, 2008 9:12 AM by Petter A

# re: The GridView Row Drag Overlay Extender

giving the following error. please help me

Server Error in '/SampleWebSite' Application.

--------------------------------------------------------------------------------

Configuration Error

Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

Parser Error Message: The configuration section cannot contain a CDATA or text element.

Source Error:

Line 61: <add assembly="System.Web.Services, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies>

Line 62: <buildProviders>

Line 63: <add extension="*.asbx" type="Microsoft.Web.Preview.Services.BridgeBuildProvider"/>--&gt;

Line 64:       </buildProviders>

Line 65: </compilation>

Source File: C:\Documents and Settings\James1\Desktop\Flan.FutureControls_v_0.0.3\SampleWebSite\web.config    Line: 63

--------------------------------------------------------------------------------

Version Information: Microsoft .NET Framework Version:2.0.50727.42; ASP.NET Version:2.0.50727.213

Thursday, February 07, 2008 7:38 AM by James

# 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 01, 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 01, 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 08, 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 02, 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 03, 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 09, 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 05, 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 08, 2008 2:21 PM by tak

# re: The GridView Row Drag Overlay Extender

I'm sorry ... i speak spanish, i'm not good with this language, i hop that you understand.

I have the next error on web.config file:

<add verb="GET" path="SearchSiteMaps.axd" type="Microsoft.Web.Preview.Search.SearchSiteMapHandler" validate="true"/>

if i'll try comment the last tag .... the next error is in this tag:

<add verb="*" path="Diagnostics.axd" type="Microsoft.Web.Preview.Diagnostics.DiagnosticsHandler" validate="true"/>

And,if i'll try comment the last tag .... the next error is this:

Line 11:             <asp:ScriptManager ID="ScriptManager1" runat="server">

Compiler Error Message: CS0234: The type or namespace name 'Diagnostics' does not exist in the namespace 'Microsoft.Web.Preview' (are you missing an assembly reference?)

Source File: c:\Documents and Settings\jadiazs\Escritorio\SampleWebSite\MasterPage.master

I was try to fix, looking for on all sides, but i'm not finding nothing at all.

Please, help me with this error.

Thanks.

Tuesday, September 09, 2008 9:40 PM by Anonimo 2891sdaj

# 22 drag &amp; drop scripts &laquo; The Adventures of Amit Dua

Pingback from  22 drag &amp; drop scripts &laquo; The Adventures of Amit Dua

Monday, October 13, 2008 11:39 AM by 22 drag & drop scripts « The Adventures of Amit Dua

Leave a Comment

(required) 
(required) 
(optional)
(required)