Povide Drag Option across Datagrids(Drag and Drop)

Thanks in advance for assisting me,

I am developing a asp.net web application(VB.Net).

I am New to AJAX and have a requirement where i should be able to select(say using a check box) and drag(move) a particular or a set of rows from one datagrid to a another datagrid in the same page.

Is this feasible ,what should be the approach......

Hi,

If your using checkbox or any other way to mark the rows you wanted move..... you can either create a xml ....(The data to be moved) or you can create a temp table and you can update the new datagrid... well, I am not quite sure that, through client side code the data can be moved between two datagrid is possible..? May be primary datagrid data can be as XML document though which the secondary data grid can be updated......

Preview DragDropManager does not work at all

I'm writting an application that uses extensively drag and drop. It used Sys.UI.DragDropManager and worked fine on July CTP. Now I'm getting a lot of errors in the new Preview DragDopManager. I guess I should not using this one, instead I'm trying to use AjaxControlToolkit.DragDropManager, as it seems to work with the Ajax Control Toolkit.

Hi,

you're right, the DragDropManager defined in the CTP uses type methods (Array.add, Array.remove) that aren't defined anywhere. The DragDropManager contained in the AjaxControlToolkit is the one contained in the July CTP, though you might want to correct the following issue until a Toolkit refresh is available:

http://forums.asp.net/thread/1436147.aspx

Thank you Garbin. I'm using AjaxControlToolkit.DragDropManager with the suggested workaround and it seems to work properly. However there is another bug in the DragDropManager. In some circumstances (sorry I can tell you exactly what circumstances), DragDropManager calculates incorrectly the statingPoint. This bug was in July CTP and is in AjaxControlToolkit.DragDropManager. Sometimes, when you start dragging a control, the drag visual goes way from its natural position, it goes below and right. I'm using the following workaround IDragSource behavior:

// cuando se pulsa con el ratón en el asa para mover
// se comienza la operación Drag and Drop
function OnMoveHandleMouseDown(e)
{
//debug.trace('OnMoveHandleMouseDown');

_startingMove = true;

// salvamos la posición actual del ratón
// para poder calcular luego startingPoint.
_lastClientX = e.clientX;
_lastClientY = e.clientY;

// salvamos la posición del control
// y del scroll para poder calcular luego startingPoint
var x = parseInt(_frame.style.left.replace('px',''));
var y = parseInt(_frame.style.top.replace('px', ''));
var scroll = Sys.UI.Control.getScrollPosition( _frame );

saveOriginalPosition();
window._event = e;
AjaxControlToolkit.DragDropManager.startDragDrop(this, _frame, null);

//hay un bug en el DragDropManager que calcula incorrectamente
//startingPoint, con lo que el control se va lejos
//de la posición donde debería estar. Por eso hay que reponer
//la posición de control y calcular el startingPoint
resetPosition();
_frame.startingPoint = {
x: _lastClientX - x + scroll.x,
y: _lastClientY - y + scroll.y
};

if (window.__safari) {
document.onselectstart = _onSelectStartDelegate;
} else {
$addHandler(document, 'selectstart', _onSelectStartDelegate);
}
}

Basically I'm calculating the startingPoint, I'm assuming (i konow it) that _frame.style.position = 'absolute'.

Here is saveOriginalPosition:

function saveOriginalPosition()
{
var left = parseInt( _frame.style.left.replace('px', '') );
var top = parseInt( _frame.style.top.replace('px', ''));
_originalPosition = { x:left, y:top };
}

and Sys.UI.Control.getScrollPosition:

Sys.UI.Control.getScrollPosition = function(element) {
var scrollLeft = 0;
var scrollTop = 0;
var parent;

for (parent = element.parentNode; parent; parent = parent.parentNode)
{
if (parent.scrollLeft) {
scrollLeft += parent.scrollLeft;
}
if (parent.scrollTop) {
scrollTop += parent.scrollTop;
}
}
return { x: scrollLeft, y: scrollTop };
}

I mean I can't tell you ...

Hi,

thank you for posting the code, I'll try to understand what's happening there.

Let me know if you manage to write a repro for this issue.

Sorry, but time restrictions prevent me to create a simple repro. However I can tell you what I discovered.

1) the _drag method sets the location (setLocation(position)) based on this calculus:

position = mousePosition - statingPoint + scroll // please, assume these are 2D vectors and we have overloaded the operators.

2) when starting the dragging operation, if the original position of drag visual is 'absolute', the position must not be changed and:

staringPoint must be = mousePosition - position + scroll

3) However startDragDrop method calculates starting point as:

startingPoint = mousePosition - getLocation + scroll

getLocation can be different (likely greatter) than position (style.left , style.top) for an absolutely postioned element if it has a positioned ancestor other than body. This is because the drag visual moves down and right when starting the drag operation

4) startDragDrop contains an extrange logic. It does:

dragVisual.style.position = "absolute";

....

if (dragVisual.style.position == "absolute") {
dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, Sys.UI.DomElement.getLocation(dragVisual));
}
else {
var left = parseInt(dragVisual.style.left);
var top = parseInt(dragVisual.style.top);
if (isNaN(left)) left = "0";
if (isNaN(top)) top = "0";

dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, { x: left, y: top });
}

comparing position == 'absolute' has no sense if you previously set position = 'absolute'

I also think (not sure) it should be:

if (dragVisual.style.position != "absolute") {
dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, Sys.UI.DomElement.getLocation(dragVisual));
}
else {
var left = parseInt(dragVisual.style.left);
var top = parseInt(dragVisual.style.top);
if (isNaN(left)) left = "0";
if (isNaN(top)) top = "0";

dragVisual.startingPoint = this.subtractPoints(dragVisual.startingPoint, { x: left, y: top });
}

...

dragVisual.style.position = "absolute";

Ok, here is a repro:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID= "sm" runat="server">
</asp:ScriptManager>
<h1>Bug demostration</h1>
<p /><p /><p /><p /><p />
<div style='position:relative'>
<asp:Panel runat="server" ID="panel1" style='position:absolute;left:50px;top:50px;width:50px;height:100px;background-color:Blue;'>
<asp:Panel runat="server" ID="handle" style='position:absolute;left:0px;top:0px;width:50px;height:20px;background-color:Green;'>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
TargetControlID="panel1" DragHandleID="handle" />
</div>
</form>
</body>
</html>

Please, try to drag the panel, you will see how the drag visual moves down and right when you start the drag operation.

I applied the above changes and it seems to work :-)

Hi,

thanks. Is the above repro using the modified version of the Toolkit (i.e. the one with the fix suggested in the first reply) ?

Yes,
Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.

Hi,

where is the file stored that has to be changed?

Jesús:

Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.

Months later this bug still exists in the March '07 release. Any idea from MSFT if this fix will be incorporated into a release?

Gerry

Jesús:

Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.

Months later this bug still exists in the March '07 release. Any idea from MSFT if this fix will be incorporated into a release?

Gerry

Jesús:

Whithout any changes, the repro shows the bug, with your first fix, the repro still shows the bug. With the fix I suggested does not show the bug.

Months later this bug still exists in the March '07 release. Any idea from MSFT if this fix will be incorporated into a release?

Gerry

Where do you incorporate this fix? You can show this in the case of your example.

Thanks

Vid

Problem Dragging ModalPopupExtender

In the ModalPopupExtender when I drag the popup it always snaps back to the middle.

If I place the JavaScript code that is in the sample page on my page then I am able to drag the popup around the page and it stays where I drop it as expected.

<script type="text/javascript"> // The following snippet works around a problem where FloatingBehavior // doesn't allow drops outside the "content area" of the page - where "content // area" is a little unusual for our sample web pages due to their use of CSS // for layout. function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px"; } setBodyHeightToContentHeight(); $addHandler(window, "resize", setBodyHeightToContentHeight); </script>

The JavaScript says it's just a work around due to how the sample page is structured. But, in my page I'm not using any type of css layout (other than for the ModalPopupExtender background). I just have a HyperLink, Panel for the popup, Panel for the popup handle and ModalPopupExtender.

<%@dotnet.itags.org. Page Language="C#" %><%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">protected void ButtonOK_Click(object sender, EventArgs e){Response.Redirect("myModal.aspx");}</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Untitled Page</title><style type="text/css">/*Modal Popup*/.modalBackground{background-color: #000000;filter: alpha(opacity=30);opacity: 0.3;}</style></head><body><form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:HyperLink ID="LinkShow" runat="server">Click to show dialog</asp:HyperLink><br /><br /><br /><asp:Panel ID="PanelPopup" runat="server"><asp:Panel ID="PanelPopupHandle" runat="server">This is the popup handle</asp:Panel>This is the content of the popup panel<br /><asp:Button ID="ButtonOK" runat="server" Text="OK" onclick="ButtonOK_Click" /><asp:Button ID="ButtonCancel" runat="server" Text="Cancel" /></asp:Panel><br /><cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"TargetControlID="LinkShow" CancelControlID="ButtonCancel" Drag="True" PopupControlID="PanelPopup"PopupDragHandleControlID="PanelPopupHandle"></cc1:ModalPopupExtender></div></form></body></html>

Am I missing something or do I need to always place that piece of JavaScript on pages that use the ModalPopupExtender?

this is problem due to not specifying height and width for popup panel
try adding height and width:-

<asp:PanelID="PanelPopup"runat="server"Width="300"Height="300"BorderWidth="1"BackColor="AliceBlue">

Yes, that works. Thank you!

As soon as I click on the dragable header of the ModalPopupExtender popup, the panel moves to the right. It keeps doing this every time I click on it.

I have read every work around on the web to fix this and nothing has worked for me:

1. Added the javascriptsetBodyHeightToContentHeight()

2. Set the Height and Width of the body tag

3. Modified FloatingBahavior.js:

this.onDragEnd =function(canceled) {

canceled =false; <-- added this

4. Set the width and height in the last post.

Nothing has worked for me! Even setting Drag="true" or Drag="false" seems to not work at all.

I could sure use an answer.

problem in implement ajax component

hi guys,

i m shaikhu. i try to implement ajax components . i start from ajax drag panel , i make it and it's working but when i drag and place panel in my page it go again it' default position not stay anywhere in my page .

what's fault.

Hi,

the DragPanel uses the BODY area as the drop zone. This area is determined by the layout of the page, but you can enlarge it using CSS:

body { height:600px;}

Problem in Script Manger ?

Hi , I use AJAX my project but I have a problem … When I drag and drop the ScripManger in my page , this error will be occur : Element 'ScriptManager' is not a known element. This can occur if there is a compilation error in the Web site. Although I don't have any other errors in my website .. What is a problem ?? Please help me …

You must copy the file named "System.Web.Extensions.dll" to the folder named "bin" in your project.

The default path of the file is "C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v.1.0.61025\".

----If the answer helped you please click the "As answer" button----

Hi ,

Thanks for your reply ..

I found the "System.Web.Extensions.dll" as you describeBut I don't have folder named "bin" in my website folder !!

Is there in any folder else ?? or can I found this folder in another place ??

Thaaaaaaaanks..

You could add a folder named "Bin".

Or add reference in the webside then you can see the folder.

I do that – add new Bin file- and but file in it .. but it still the same error !!Note : when I use update panel it also appear the same error but it work ( I means flicker don't appear ) What is the problem ?

also I note that this error occure when the page is from master .. but if it defult page and don't inherint from mster then this error will be appear ..

Please help me ...

Please add the following entry in your web.config:

<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</assemblies>

Raymond Wen - MSFT:

Please add the following entry in your web.config:

<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</assemblies>

This entry is already exist in my web config .. but the problem is still appear !!

Plz what can I do ??

Please remove ajax from your system and again install it in your system

problem migrate from atlas to ajax

Hi,

I have the folloving problem.

I' ve downloaded sample drag and drop apllication from codeproject.com (http://www.codeproject.com/Ajax/AtlasDragNDrop.asp) and I need to migrate it from atlas to new ajax v1.0beta.

Problem is I didn't find many sample apllictacion in new Ajax and i have problem to rewrite javascript code:

for example:

orginal:

function addFloatingBehavior(ctrl){
var floatingBehavior = new Custom.UI.FloatingBehavior();
floatingBehavior.set_handle(ctrl);
var dragItem = new Sys.UI.Control(ctrl);
dragItem.get_behaviors().add(floatingBehavior);
floatingBehavior.initialize();
}

my try:

function addFloatingBehavior(ctrl){
var floatingBehavior = $create(AjaxControlToolkit.FloatingBehavior,{'handle' : ctrl}, ctrl );
floatingBehavior.initialize();

}

it doesnt work

next scriptmanager in atlas has something like
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />

in ajax i cann't find replacement

In simple, my problem is add a floatingbehavior to DIV

(DragPanelExtender is not a solution for me)

Thanx for help

Any suggestion?

Please can anybody help me to write simple page with one button. If i click this button - new element (div) is added to page, and this div have to have floatingbehaior.

If I click button again, next div is created and so on...

It have to be in ajax v1.0 beta ...

If you want to see the same apllication in atlas please look at :http://www.codeproject.com/Ajax/AtlasDragNDrop.asp

It′s very urgent. Please help

Thanks Mayo.

I don't have a full answer, but I can tell you the drag and drop I believe is now in the CTP PreviewDragDrop.js file. with the floating behavior being Sys.Preview.UI.FloatingBehavior.