Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » eo_RegisterDragTarget Drag Targets with treeviews interfere

eo_RegisterDragTarget Drag Targets with treeviews interfere Options
Previous Topic · Next Topic
ixthnar
Posted: Thursday, January 27, 2011 10:44:19 PM
Rank: Advanced Member
Groups: Member

Joined: 11/15/2008
Posts: 44
Hi,

I've chopped up my code to isolate a problem. Consider two treeviews each wrapped with a drag target. The upper tree or drag target "casts a shadow" blocking the lower drag target. (Sorry, I could have trimmed the example more tightly.)

Quote:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Harmoniks.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
function pageLoad() {
}
</script>

<style type="text/css">
.UCCorral_CallbackPanel_TreeView
{
border:solid 1px #AA0000;
}
</style>

<script type="text/javascript">
//document.getElementById("HPMMaster_Div_Debug").innerHTML += "Reg ";

function UCCorral_TreeView_DragBegin(treeview, srcNode, destNode, newIndex) {
// destNode is null
return true;
}

function UCCorral_CallbackPanel_TreeView_Load(objEOCallbackPanel) {
debugger;
if (objEOCallbackPanel.m_objDragTarget && objEOCallbackPanel.m_objDragTarget != null) {
eo_UnregisterDragTarget(objEOCallbackPanel.m_objDragTarget);
objEOCallbackPanel.m_objDragTarget = null;
}
objEOCallbackPanel.m_objDragTarget = new CDragTargetTreeView(objEOCallbackPanel);
eo_RegisterDragTarget(objEOCallbackPanel.m_objDragTarget);
}

function UCCorral_CallbackPanel_TreeView_Unload(objEOCallbackPanel) {
if (objEOCallbackPanel.m_objDragTarget && objEOCallbackPanel.m_objDragTarget != null) {
eo_UnregisterDragTarget(objEOCallbackPanel.m_objDragTarget);
objEOCallbackPanel.m_objDragTarget = null;
}
}

function CDragTargetTreeView(objEOCallbackPanel) {
try {
this.m_objEOCallbackPanel = objEOCallbackPanel;
this.m_objPanelDragTarget = null;
this.m_objEOTreeNodeTarget = null;
this.m_objEOTreeView = null;
var strCallbackPanelId = objEOCallbackPanel.getId();
if (strCallbackPanelId) {
var strLast = strCallbackPanelId.slice(strCallbackPanelId.length - 1);
var ixEnd = strCallbackPanelId.indexOf("UCCorral_CallbackPanel_TreeView");
var strPrefix = strCallbackPanelId.slice(0, ixEnd);
this.m_objPanelDragTarget = document.getElementById(strPrefix + "UCCorral_Panel_Tree" + strLast);
this.m_objEOTreeView = eo_GetObject(strPrefix + "UCCorral_TreeView" + strLast);
}
else {
alert("CDragTargetTreeView,construct," + strCallbackPanelId + "," + (this.m_objPanelDragTarget ? "def" : "NULL"));
}
}
catch (err) {
alert("CDragTargetTreeView,construct=" + err);
}
}

// Does drag target accept the data being dragged
CDragTargetTreeView.prototype.canDrop = function(mode, type, data) {
return (type == "eo_TreeNode");
}

// Get the DHTML element associated with drag target
CDragTargetTreeView.prototype.get_dropTargetElement = function() {
return this.m_objPanelDragTarget;
}

// Called when mouse is over drag target
CDragTargetTreeView.prototype.onDragInTarget = function(mode, type, data, x, y) {
// data is a tree node
try {
if (this.m_objEOTreeView) {
var objNewTarget = this.m_objEOTreeView.findNode(x, y);
if (this.m_objEOTreeNodeTarget != objNewTarget) {
this.m_objEOTreeNodeTarget = objNewTarget;
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,Target=" + (objNewTarget ? objNewTarget.getText() : "(none)") + "]<br>";
}
}
else
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,No tree,Target=" + x + "," + y + "]<br>";
}
catch (err) {
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,onDragInTarget,Err=" + err + "]<br>";
}
}

// Called when mouse leaves drag target
CDragTargetTreeView.prototype.onDragLeaveTarget = function(mode, type, data) {
try {
this.m_objEOTreeNodeTarget = null;
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,Leave]<br>";
}
catch (err) {
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,onDragLeaveTarget,Err=" + err + "]<br>";
}
}

// Called when the item is being dropped on the target
CDragTargetTreeView.prototype.drop = function(type, mode, data) {
try {
if (data && this.m_objEOCallbackPanel && this.m_objEOTreeNodeTarget) {
var strParam = "DropTree," + mode + "," +
this.m_objEOTreeNodeTarget.getValue() + "," + data.getValue();
var objCallback = this.m_objEOCallbackPanel;
setTimeout(function() { objCallback.execute(strParam, null); }, 10);
}
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,Drop]<br>";
}
catch (err) {
document.getElementById("HPMMaster_Div_Debug").innerHTML += "[Tree,drop,Err=" + err + "]<br>";
}
}
/// CDragTargetTreeView -- End
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />


<table border="1" cellspacing="0" cellpadding="0" style="width:550px;height:700px;">
<tr>
<td style="padding-left:100px;">
<eo:CallbackPanel ID="UCCorral_CallbackPanel_TreeView1" runat="server" Height="200px" Width="400px"
CssClass="UCCorral_CallbackPanel_TreeView" AutoDisableContents="True" ChildrenAsTriggers="True"
Triggers="{ControlID:UCCorral_TreeView1;Parameter:}"
ClientSideOnLoad="UCCorral_CallbackPanel_TreeView_Load"
ClientSideOnUnload="UCCorral_CallbackPanel_TreeView_Unload">

<asp:Panel ID="UCCorral_Panel_Tree1" runat="server" Height="190" Width="380" BorderColor="#00AA00" BorderWidth="1" BorderStyle="Solid">

<eo:TreeView ID="UCCorral_TreeView1" runat="server" Height="180" Width="360"
DragDropScope="Global"
AllowDragDrop="True" AllowDragReordering="True"
AllowEdit="True"
AllowMultiSelect="True" AutoSelectSource="ItemClick"
EnableKeyboardNavigation="True"
ControlSkinID="None" RaisesServerEvent="false">
<LookNodes>
<eo:TreeNode CollapsedImageUrl="00030201"
DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
ExpandedImageUrl="00030202" ImageUrl="00030203" ItemID="_Default"
NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
</eo:TreeNode>
</LookNodes>
<TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:none;border-bottom-width:1px;border-left-color:#999999;border-left-style:none;border-left-width:1px;border-right-color:#999999;border-right-style:none;border-right-width:1px;border-top-color:#999999;border-top-style:none;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
<Nodes>
<eo:TreeNode Text="Welcome to MSDN Library">
<SubGroup>
<Nodes>
<eo:TreeNode Text="How to Use the MSDN Library Table of Contents"/>
</Nodes>
</SubGroup>
</eo:TreeNode>
<eo:TreeNode Text="Development Tools and Languages">
<SubGroup>
<Nodes>
<eo:TreeNode Text="Visual Studio 2005"/>
<eo:TreeNode Text="Visual Studio.NET"/>
<eo:TreeNode Text=".NET Framework SDK"/>
</Nodes>
</SubGroup>
</eo:TreeNode>
</Nodes>
</TopGroup>
</eo:TreeView>

</asp:Panel>
</eo:CallbackPanel>
</td>
</tr>
<tr>
<td>
<eo:CallbackPanel ID="UCCorral_CallbackPanel_TreeView2" runat="server" Height="200px" Width="400px"
CssClass="UCCorral_CallbackPanel_TreeView" AutoDisableContents="True" ChildrenAsTriggers="True"
Triggers="{ControlID:UCCorral_TreeView2;Parameter:}"
ClientSideOnLoad="UCCorral_CallbackPanel_TreeView_Load"
ClientSideOnUnload="UCCorral_CallbackPanel_TreeView_Unload">

<asp:Panel ID="UCCorral_Panel_Tree2" runat="server" Height="190" Width="380" BorderColor="#00AA00" BorderWidth="1" BorderStyle="Solid">

<eo:TreeView ID="UCCorral_TreeView2" runat="server" Height="180" Width="360"
DragDropScope="Global"
AllowDragDrop="True" AllowDragReordering="True"
AllowEdit="True"
AllowMultiSelect="True" AutoSelectSource="ItemClick"
EnableKeyboardNavigation="True"
ControlSkinID="None" RaisesServerEvent="false">
<LookNodes>
<eo:TreeNode CollapsedImageUrl="00030201"
DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
ExpandedImageUrl="00030202" ImageUrl="00030203" ItemID="_Default"
NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
</eo:TreeNode>
</LookNodes>
<TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:none;border-bottom-width:1px;border-left-color:#999999;border-left-style:none;border-left-width:1px;border-right-color:#999999;border-right-style:none;border-right-width:1px;border-top-color:#999999;border-top-style:none;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
<Nodes>
<eo:TreeNode Text="Welcome to MSDN Library">
<SubGroup>
<Nodes>
<eo:TreeNode Text="How to Use the MSDN Library Table of Contents"/>
</Nodes>
</SubGroup>
</eo:TreeNode>
<eo:TreeNode Text="Development Tools and Languages">
<SubGroup>
<Nodes>
<eo:TreeNode Text="Visual Studio 2005"/>
<eo:TreeNode Text="Visual Studio.NET"/>
<eo:TreeNode Text=".NET Framework SDK"/>
</Nodes>
</SubGroup>
</eo:TreeNode>
</Nodes>
</TopGroup>
</eo:TreeView>

</asp:Panel>
</eo:CallbackPanel>
</td>
</tr>
<tr>
<td>
<div style="text-align:left;height:60px;overflow:auto;display:block; width:100%; background-color:#ffeeee;">
<div id="HPMMaster_Div_Debug"></div>
</div>
</td>
</tr>
</table>

</div>
</form>
</body>
</html>


With code behind
Quote:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Harmoniks
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}
}


Any thoughts? Work arounds? Silly bugs in my code excerpt?

Thanks,
Chris
Back to top
 
Christopher Brown
Posted: Friday, January 28, 2011 10:35:52 AM
Rank: Newbie
Groups: Member

Joined: 8/23/2010
Posts: 5
... by shadow I mean that where the top panel is above the bottom panel, the bottom panel does behave as a drag target (does not receive events). In other areas, it does.

It was frustrating discovering this.

Thanks for taking a look.

Chris
Back to top
 
eo_support
Posted: Friday, January 28, 2011 2:56:13 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We are able to run your code. However we still do not know what you mean by "Shadowing". Can you provide step by step instructions?

Thanks!
Back to top
 
Christopher Brown
Posted: Friday, January 28, 2011 3:20:23 PM
Rank: Newbie
Groups: Member

Joined: 8/23/2010
Posts: 5
... by shadow I mean that where the top panel is above the bottom panel, the bottom panel does behave as a drag target (does not receive events). In other areas, it does.

I've tested the following in the current FF and IE releases. Let's use the following terminology:
T -- The rectangle encompassing the top tree nodes.
S -- The rectangle with a horizontal position and width of T and a vertical position and height starting below T and extending to the bottom of the page.
B -- The rectangle encompassing the bottom tree nodes.
BL -- The portion of B that does NOT intersect with S
BS -- The portion of B that INTERSECTS with S

1. Clicking on the a portion of a treenode within BL
2. Drag it over items in BL or T
3. Notice events accumulating in the debug panel at the bottom
4. Reload the page to clear the debug panel
5. Clicking on the a portion of a treenode within BS
6. Drag it over items in BS
7. Notice *NO* events accumulating in the debug panel at the bottom

When you play around with this you find the T seems to prevent events from reaching drag targets below it ... as if it casts a shadow.

Thanks!
Chris
Back to top
 
eo_support
Posted: Sunday, January 30, 2011 5:51:47 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We have posted a new build that should fix this problem. Please see your private message for the download location.

Thanks!
Back to top
 
ixthnar
Posted: Sunday, January 30, 2011 7:53:08 PM
Rank: Advanced Member
Groups: Member

Joined: 11/15/2008
Posts: 44
Wow EO rocks! Y'all make me look smart for recommending EO.

So far I have not received the private message. Looking forward to it.

Thanks,
Chris
Back to top
 
ixthnar
Posted: Sunday, January 30, 2011 7:57:09 PM
Rank: Advanced Member
Groups: Member

Joined: 11/15/2008
Posts: 44
Never mind ... the message is under the login for a different EO license.
Back to top
 
ixthnar
Posted: Sunday, January 30, 2011 9:21:48 PM
Rank: Advanced Member
Groups: Member

Joined: 11/15/2008
Posts: 44
Confirmed! It is all working. Thanks EO.
Back to top
 
eo_support
Posted: Monday, January 31, 2011 8:50:57 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Cool. Thanks for confirming it works!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.