<%@ Control Language="c#" AutoEventWireup="True" Codebehind="MultipleDragnDrop.ascx.cs" Inherits="ASPNETExpert.WebControls.Demo.Tree.Advanced.MultipleDragnDrop" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<script language=javascript>
function AfterDropHandler(dragnDrop) {
if(dragnDrop.GetTargetNode() && confirm('Move selected node(s) to ' + dragnDrop.GetTargetNode().Text + '?'))
dragnDrop.ClientNodeMove();
else
if(dragnDrop.GetTargetElement()) {
if(dragnDrop.GetTargetDropId() == 'Image')
AnimateImages(dragnDrop);
if(dragnDrop.GetTargetDropId() == 'Text') {
var sourceText = '';
for(var i in dragnDrop.GetSourceNodes())
sourceText += (dragnDrop.GetSourceNodes()[i].Text + ';');
dragnDrop.GetTargetElement().value = sourceText;
}
if(dragnDrop.GetTargetDropId() == 'ListBox') {
for(var i in dragnDrop.GetSourceNodes())
dragnDrop.GetTargetElement().options[dragnDrop.GetTargetElement().length] = new Option(dragnDrop.GetSourceNodes()[i].Text);
}
}
}
var imgSources;
var imgElem;
var count;
function AnimateImages(dragnDrop) {
imgSources = [];
imgElem = dragnDrop.GetTargetElement();
for(var i in dragnDrop.GetSourceNodes())
if(dragnDrop.GetSourceNodes()[i].Value != null)
imgSources[imgSources.length] = 'images/fauna/' + dragnDrop.GetSourceNodes()[i].Value;
if(imgSources.length > 0) {
count = 0;
imgElem.src = imgSources[0];
setTimeout('NextImage(1)', 100);
}
}
function NextImage(index)
{
imgElem.src = imgSources[index];
if(++index >= imgSources.length) {
index = 0;
if(++count > 5)
return;
}
setTimeout('NextImage(' + index + ')', 100);
}
</script>
<table cellSpacing=0 cellPadding=0 border=0 xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
<tr>
<td vAlign=top>
<ec:ExpertTree id="MultipleDragDropTree" runat="server" SelectionMode="Multiple" DragAndDropEnabled="true" Drop="ScriptResolved">
<OnClientAfter NodeDropHandler="AfterDropHandler" />
<TreeLook Width="220" Height="300px" Overflow="Scroll" />
<Looks>
<ec:TreeNodeLook Runat="server" Id="Parent1" BindStrategy="AutoBind">
<InitLook>
<ExpandButton Width="11px" Height="11px" ImageResourceUrl="XP.ExpandButton.gif" />
<NodeIcon Width="16px" Height="16px" Padding-Left="3px" Padding-Right="3px" />
<TextSection ForeColor="Black" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Padding-Top="2px" Padding-Left="5px" Padding-Bottom="2px" Padding-Right="5px" Cursor="Default" />
</InitLook>
<HoveredLook>
<TextSection ForeColor="#000066" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Font-Decoration="Underline" />
</HoveredLook>
<ExpandedLook>
<ExpandButton Width="11px" Height="11px" ImageResourceUrl="XP.CollapseButton.gif" />
</ExpandedLook>
<SelectedLook>
<TextSection ForeColor="White" Background-Color="#2060C0" Padding-Top="1px" Padding-Left="4px" Padding-Bottom="1px" Padding-Right="4px" Border-Style="Dotted" Border-Color="#CE953A" Border-Width="1px" />
</SelectedLook>
<SelectedHoveredLook>
<TextSection ForeColor="White" Background-Color="#2060C0" Padding-Top="1px" Padding-Left="4px" Padding-Bottom="1px" Padding-Right="4px" Border-Style="Dotted" Border-Color="#CE953A" Border-Width="1px" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Font-Decoration="Underline" />
</SelectedHoveredLook>
<DisabledLook>
<TextSection ForeColor="#808080" />
</DisabledLook>
<SubTree>
<Expand Effect="GlideTopToBottom" Duration="100" />
<Collapse Effect="GlideTopToBottom" Duration="100" />
</SubTree>
</ec:TreeNodeLook>
</Looks>
<Nodes>
<ec:TreeNode Expanded="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/Desktop.gif" Text="Desktop">
<Nodes>
<ec:TreeNode Expanded="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyDocuments.gif" Text="My Documents">
<Nodes>
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" Text="My Pictures" Expanded="true">
<Nodes>
<ec:TreeNode Text="Cat" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" Value="cats.jpg" />
<ec:TreeNode Text="Tiger" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" Value="tiger.jpg" />
<ec:TreeNode Text="Lion" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" Value="lions.jpg" />
<ec:TreeNode Text="Butterfly" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" Value="butterfly.jpg" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyMusic.gif" Text="My Music" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Expanded="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyComputer.gif" Text="My Computer">
<Nodes>
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/FloppyDrive.gif" Text="31/2 Floppy (A:)" />
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/LocalDrive.gif" Text="Local Disk (C:)" />
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/LocalDrive.gif" Text="New Volume (D:)" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/RecycleBin.gif" Text="Recycle Bin (Not Draggable)" IsDraggable="false" />
</Nodes>
</ec:TreeNode>
</Nodes>
</ec:ExpertTree>
</td>
<td style="PADDING-LEFT: 30px" vAlign=top>
<table cellSpacing=0 cellPadding=0 border=0>
<tr>
<td>
<p>Drag and drop nodes onto a control / HTML
element below.</p></td></tr>
<tr>
<td>
<table height=120 cellSpacing=3 cellPadding=0 width="100%" border=0>
<tr>
<td vAlign=top><input id=Text1 type=text name="Text1" runat="server" DropId="Text"></td>
<td vAlign=top><asp:listbox id=ListBox1 DropId="ListBox" Runat="server" CssClass="DropListBox"></asp:listbox></td>
<td vAlign=top><IMG src="images/fauna/cats.jpg" border=0 DropId="Image"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><asp:checkbox id=DragAndDropEnabled Runat="server" AutoPostBack="True" Checked="True" Text="Enable Drag-and-Drop" CssClass="formtext" oncheckedchanged="DragAndDropEnabled_CheckedChanged"></asp:checkbox></td></tr>
<tr>
<td style="PADDING-TOP: 10px"><span
class=formtext>DropAction</span> </td></tr>
<tr>
<td><asp:radiobuttonlist id=DropActionList Runat="server" AutoPostBack="True" RepeatDirection="Vertical" Font-Names="Verdana, Tahoma, Arial" Font-Size="8" CellPadding="2" CellSpacing="0" onselectedindexchanged="DropActionList_SelectedIndexChanged">
<asp:ListItem Value="AutoPostBack">AutoPostBack</asp:ListItem>
<asp:ListItem Selected="True" Value="ScriptResolved">Script Resolved</asp:ListItem>
</asp:radiobuttonlist>
</td>
</tr>
<tr>
<td style="PADDING-LEFT: 10px" vAlign=top>
<ecd:DescriptionView runat="server" ID="Descriptionview1">
<ecd:Description id="Description1" runat="server">
Set <b>SelectionMode="Multiple"</b> for a tree if you want that a user can select multiple nodes.
Use <b>Ctrl</b> or <b>Shift</b> key for multiple nodes selection.
</ecd:Description>
<ecd:Description id="Description2" runat="server">
You can drop selected nodes onto a Web control / plain HTML element and process drops at the
client or server side.
</ecd:Description>
<ecd:Description id="Description3" runat="server">
The control or HTML element should have <b>DropId</b> attribute set to some value in order
to accept nodes' drops.
</ecd:Description>
<ecd:Description id="Description4" runat="server">
Set <b>DragAndDropEnabled="true"</b> for the tree to enable drag and drop its nodes.
Set <b>IsDraggable</b> boolean property for an individual node to enable / disable dragging it.
</ecd:Description>
<ecd:Description id="Description5" runat="server">
Set tree's <b>Drop</b> property to one of the values:</p>
<ul>
<li><b>AutoPostBack</b> - to raise PostBack and server-side <b>NodeMoved</b> event when the node is dropped.</li>
<li><b>AutoClientNodeMove</b> - to move the node at the client side.</li>
<li><b>ScriptResolved</b> - to call a client-side event handler.</li>
</ul>
To define a client-side drop event handler use the following :
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" ID="Syntaxhighlight4">
<OnClientAfter NodeDropHandler="AfterDropHandler" />
</ecd:SyntaxHighlight>
</pre>
<b>AfterDropHandler</b> is the name of a function that will be called after a
node is dropped. This function accepts a single parameter of type <b>DragnDrop</b>.
See client API docs for more information regarding client objects and their methods.
</ecd:Description>
</ecd:DescriptionView>
</td>
</tr>
</table>
</td></tr></table>
<ec:CodeViewTab id="CodeViewTab1" runat="server">
<ec:TabItem runat="server" Text="aspx" ID="Tabitem1">
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" OutputFile="Advanced/MultipleDragnDrop.ascx" ID="Syntaxhighlight1"/>
</pre>
</ec:TabItem>
<ec:TabItem runat="server" Text="C#" ID="Tabitem2">
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="C#" OutputFile="Advanced/MultipleDragnDrop.ascx.cs" ID="Syntaxhighlight2"/>
</pre>
</ec:TabItem>
<ec:TabItem runat="server" Text="VB" ID="Tabitem3">
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="VB" OutputFile="Advanced/MultipleDragnDrop_vb.ascx.vb" ID="Syntaxhighlight3"/>
</pre>
</ec:TabItem>
</ec:CodeViewTab>