Dynamically add dragpanels

  • Thread starter Thread starter Mike
  • Start date Start date
M

Mike

I want to be able to add an unknown quantity of dragpanels to a page at
runtime. Is this possible using ASP.NET Ajax?

Thanks
 
yes. just create a div (with a div handle), then create a
FloatingBehavior. (see the DragPanel source)

-- bruce (sqlwork.com)
 
Ok. I created the divs, then looked at the "source". I wasn't sure what I
was looking for, so I looked in the FloatingBehaviours js file, and both cs
files that come with the Toolkit. None the wiser for that, I googled
FloatingBehaviour and found an article about programmatically adding Drag
Drop: http://www.gokhanorun.info/. This looked promising, until I saw it
referred to a beta release of Atlas. Nevertheless, I had a stab at
following it, because I have totally failed to find anything else useful:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragTest.aspx.cs"
Inherits="DragTest" %>
<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function addFloatingBehaviour(ctrl, handle){
var floatingBehaviour = new Sys.UI.FloatingBehaviour(); //error here
floatingBehaviour.set_handle(handle);
var dragItem = new Sys.UI.Control(ctrl);
dragItem.get_behaviours.add(floatingBehaviour);
floatingBehaviour.initialize();
}
function pageLoad(){
addFloatingBehaviour(document.getElementById('Drag'),document.getElementById('Handle'));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<div id="Drag"
style="width:120px;height:180px;padding:0;background-color:blue;">
<div id="Handle"
style="width:120px;height:20px;padding:0;margin:0;background-color:gray;">Handle</div>
Content
</div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
</body>
</html>

This doesn't work. I get a javascript error saying Object expected at the
point I have marked in the code. I guess I have not referenced something
somewhere that I need to. Can you see what it is?

Thanks
 
Never mind, I've used a different library.

Mike said:
Ok. I created the divs, then looked at the "source". I wasn't sure what
I was looking for, so I looked in the FloatingBehaviours js file, and both
cs files that come with the Toolkit. None the wiser for that, I googled
FloatingBehaviour and found an article about programmatically adding Drag
Drop: http://www.gokhanorun.info/. This looked promising, until I saw it
referred to a beta release of Atlas. Nevertheless, I had a stab at
following it, because I have totally failed to find anything else useful:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragTest.aspx.cs"
Inherits="DragTest" %>
<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function addFloatingBehaviour(ctrl, handle){
var floatingBehaviour = new Sys.UI.FloatingBehaviour(); //error here
floatingBehaviour.set_handle(handle);
var dragItem = new Sys.UI.Control(ctrl);
dragItem.get_behaviours.add(floatingBehaviour);
floatingBehaviour.initialize();
}
function pageLoad(){

addFloatingBehaviour(document.getElementById('Drag'),document.getElementById('Handle'));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<div id="Drag"
style="width:120px;height:180px;padding:0;background-color:blue;">
<div id="Handle"
style="width:120px;height:20px;padding:0;margin:0;background-color:gray;">Handle</div>
Content
</div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
</body>
</html>

This doesn't work. I get a javascript error saying Object expected at the
point I have marked in the code. I guess I have not referenced something
somewhere that I need to. Can you see what it is?

Thanks
Click to expand...
 
Back
Top