<%@ Control Language="c#" Inherits="ASPNETExpert.WebControls.Demo.Tree.Advanced.NodeEditing" CodeFile="NodeEditing.ascx.cs" %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<script language="javascript">
function BeforeTextChangedHandler(node, newText) {
if(node.Value == 'ConfirmRename')
return confirm("Are you sure want to rename " + node.Text + " to " + newText + "?");
if(node.Value == 'MatchPattern') {
var result = new RegExp("^\\(\\d\\d\\d\\)\\d\\d\\d\\-\\d\\d\\d\\d$").test(newText);
if(!result)
alert('Please enter correct phone number.');
return result;
}
return true;
}
function AfterTextChangedHandler(node, oldText) {
document.getElementById('<%=InfoText.ClientID%>').innerHTML = 'Text changed from <b>"' + oldText + '"</b> to <b>"' + node.Text + '"</b>';
}
</script>
<table cellSpacing="5" cellPadding="0" border="0" xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
<tr>
<td colspan=2><asp:Label Runat="server" ID="InfoText" Font-Names="Tahoma,Verdana,Arial" Font-Size="11" Font-Bold="True"></asp:Label></td>
</tr>
<tr>
<td valign=top>
<ec:ExpertTree id="NodeEditingTree" runat="server" LabelEdit="true">
<OnClientBefore NodeTextChangedHandler="BeforeTextChangedHandler" />
<OnClientAfter NodeTextChangedHandler="AfterTextChangedHandler" />
<TreeLook Width="260" Height="400px" Overflow="Scroll" />
<Looks>
<ec:TreeNodeLook Runat="server" Id="Common" 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" />
<EditTextLook Border-Style="Solid" Border-Width="1px" Border-Color="#4B7897" ForeColor="#315E7E" Font-Name="Tahoma,Verdana,Arial" Font-Size="11px" Font-Bold="true" Size="16" MaxLength="30" />
</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>
<ec:TreeNodeLook Runat="server" Id="Folder" Base="Common">
<InitLook>
<NodeIcon Width="18px" Height="18px" ImageResourceUrl="XP.ClosedFolder.gif" />
</InitLook>
<ExpandedLook>
<NodeIcon ImageResourceUrl="XP.OpenedFolder.gif" />
</ExpandedLook>
<SelectedLook>
<NodeIcon ImageResourceUrl="XP.SelectedFolder.gif" />
</SelectedLook>
</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/MyMusic.gif" Text="My Music" />
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" Text="My Pictures" />
</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 Text="Raise PostBack" PostBackOnTextChanged="true" Expanded="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ControlPanel.gif">
<Nodes>
<ec:TreeNode PostBackOnTextChanged="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/AdminTools.gif" Text="Administrative Tools" />
<ec:TreeNode PostBackOnTextChanged="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/Fonts.gif" Text="Fonts" />
<ec:TreeNode PostBackOnTextChanged="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/NetworkConn.gif" Text="Network Connections" />
<ec:TreeNode PostBackOnTextChanged="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/PrintersAndFaxes.gif" Text="Printers And Faxes" />
<ec:TreeNode PostBackOnTextChanged="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ScannersAndCameras.gif" Text="Scanners And Cameras" />
<ec:TreeNode PostBackOnTextChanged="true" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ScheduledTasks.gif" Text="Scheduled Tasks" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/RecycleBin.gif" Text="Recycle Bin (not editable)" IsEditable="False" />
<ec:TreeNode Look-Base="Folder" Text="Client-side Handling" Value="NoEdit" Expanded="true">
<Nodes>
<ec:TreeNode Look-Base="Folder" Text="Confirm rename" Value="ConfirmRename" />
<ec:TreeNode Look-Base="Folder" Text="Match pattern" Expanded="true">
<Nodes>
<ec:TreeNode Look-Base="Folder" Text="(800)123-4567" Value="MatchPattern" />
<ec:TreeNode Look-Base="Folder" Text="(800)999-8765" Value="MatchPattern" />
</Nodes>
</ec:TreeNode>
</Nodes>
</ec:TreeNode>
</Nodes>
</ec:TreeNode>
</Nodes>
</ec:ExpertTree>
</td>
<td valign=top width="100%" style="PADDING-LEFT:10px">
<ecd:DescriptionView runat="server" ID="Descriptionview1">
<ecd:Description id="Description1" runat="server">
<b>Keyboard navigation notes:</b> use <b>Tab</b> and other navigation keys to navigate the tree.
Use <b>Enter</b> to select a node. Use <b>F2</b> or <b>Enter</b> to switch the node into the edit mode.
Use <b>Esc</b> to cancel the node text changes. Use <b>Enter</b> to apply the changes.
</ecd:Description>
<ecd:Description id="Description2" runat="server">
Set <b>LabelEdit="true"</b> for the tree to enable editing labels.
</ecd:Description>
<ecd:Description id="Description3" runat="server">
Set <b>IsEditable="true"</b> boolean property for an individual node to enable
editing its label.
</ecd:Description>
<ecd:Description id="Description4" runat="server">
Set <b>PostBackOnTextChanged="true"</b> in order to raise PostBack when a node
label changed. Process <b>NodeTextChanged</b> event at the server-side.
</ecd:Description>
<ecd:Description id="Description5" runat="server">
Process a node's rename event at the client side with writing client-side handlers.
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" ID="Syntaxhighlight4">
<OnClientBefore NodeTextChangedHandler="BeforeTextChangedHandler" />
<OnClientAfter NodeTextChangedHandler="AfterTextChangedHandler" />
</ecd:SyntaxHighlight>
</pre>
<b>BeforeTextChangedHandler</b> is the name of handler function that
processes <b>NodeTextChanged</b> event before it is processed by the tree.
You can disable changing text with returning false.
<b>AfterTextChangedHandler</b> is the name of handler function that
processes <b>NodeTextChanged</b> event after it was processed by the tree.
Handling functions receive an edited node and and a proposed new or changed old
text.
</ecd:Description>
<ecd:Description id="Description6" runat="server">
<b>EditTextLook</b> allows to customize edit box appearance.
</ecd:Description>
</ecd:DescriptionView>
</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/NodeEditing.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/NodeEditing.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/NodeEditing.ascx.vb" ID="Syntaxhighlight3"/>
</pre>
</ec:TabItem>
</ec:CodeViewTab>
namespace ASPNETExpert.WebControls.Demo.Tree.Advanced
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
///
/// Summary description for NodeEditing.
///
public partial class NodeEditing : System.Web.UI.UserControl
{
protected void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
///
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
///
private void InitializeComponent()
{
this.NodeEditingTree.NodeTextChanged += new ASPNETExpert.WebControls.NodeTextChangedEventHandler(this.NodeEditingTree_NodeTextChanged);
}
#endregion
private void NodeEditingTree_NodeTextChanged(object sender, ASPNETExpert.WebControls.NodeTextChangedEventArgs eventArgs)
{
InfoText.Text = "Text changed from \"" + eventArgs.OldText + "\" to \"" + eventArgs.Node.Text + "\"";
}
}
}