 |
Web Development »
ASP.NET Controls »
General
License: The Code Project Open License (CPOL)
ASTreeView - A Free TreeView Control for ASP.NETBy JIN WeijieA full functional treeview control for ASP.NET, including drag and drop, Ajax loading, context menu, dropdown treeview. |
C#, Javascript, Windows, ASP.NET, Ajax, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
ASTreeView is a powerful treeview control for ASP.NET with drag drop, Ajax loading, context menu, XML import/export, checkbox, selection, adding/editing/deleting nodes with Ajax.
ASTreeView is developed on .NET Framework 2.0. The demo project is a Visual Studio 2005 project. ASTreeView is compatible with ASP.NET 2.0 and above.
ASTreeView is FREE! That means you can use it anywhere!
I host the project on Google Code: please download the assembly and the demo, check out the demo, and use ASTreeView in your project!
I registered a domain name for astreeview: http://www.astreeview.com.
Here are functionalities ASTreeView supports:
User can drag & drop nodes within the tree or even among trees!
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo1.aspx.
<ct:ASTreeView ID="astvMyTree"
runat="server"
BasePath="~/Javascript/astreeview/"
DataTableRootNodeValue="0"
EnableRoot="false"
EnableNodeSelection="false"
EnableCheckbox="true"
EnableDragDrop="true"
EnableTreeLines="true"
EnableNodeIcon="true"
EnableCustomizedNodeIcon="true"
EnableContextMenu="true"
EnableDebugMode="false"
EnableContextMenuAdd="false" />
protected void btnToggleDragDrop_Click( object sender, EventArgs e )
{
this.astvMyTree.EnableDragDrop = !this.astvMyTree.EnableDragDrop;
}
protected void btnToggleTreeLines_Click( object sender, EventArgs e )
{
this.astvMyTree.EnableTreeLines = !this.astvMyTree.EnableTreeLines;
}
protected void btnToggleNodeIcon_Click( object sender, EventArgs e )
{
this.astvMyTree.EnableNodeIcon = !this.astvMyTree.EnableNodeIcon;
}
protected void btnToggleCheckbox_Click( object sender, EventArgs e )
{
this.astvMyTree.EnableCheckbox = !this.astvMyTree.EnableCheckbox;
}
protected void btnToggleDefaultNodeIcon_Click( object sender, EventArgs e )
{
this.astvMyTree.EnableCustomizedNodeIcon =
!this.astvMyTree.EnableCustomizedNodeIcon;
}
protected void btnToggleContextMenu_Click( object sender, EventArgs e )
{
this.astvMyTree.EnableContextMenu = !this.astvMyTree.EnableContextMenu;
}
Enable/Disable tree line is available.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo1.aspx.
The developer can specific customized icon for each node, use default node icon, or, disable node icon.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo1.aspx.
Three-state (checked, unchecked, half-checked) checkbox is available.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo1.aspx.
A user can use context menu to edit/delete node by right clicking the node. Ajax edit/delete is supported.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo3.aspx.
A developer can bind different types of data source (currently astreeview supports datatable and XML datasource). Or developer can create ASTreeViewNode and append to the tree in the code.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo4.aspx.
OnSelectedNodeChanged and OnCheckedNodeChanged are available.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo2.aspx.
<ct:ASTreeView ID="astvMyTree"
runat="server"
BasePath="~/Javascript/astreeview/"
DataTableRootNodeValue="0"
EnableRoot="false"
EnableNodeSelection="true"
EnableCheckbox="true"
EnableDragDrop="false"
EnableTreeLines="true"
EnableNodeIcon="true"
EnableCustomizedNodeIcon="false"
AutoPostBack="true"
EnableDebugMode="false"
EnableContextMenu="false"
OnOnCheckedNodeChanged="astvMyTree_OnCheckedNodeChanged"
OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
protected void astvMyTree_OnCheckedNodeChanged
( object src, ASTreeViewNodeCheckedEventArgs e )
{
string toConsole = string.Format( ">>OnCheckedNodeChanged checked:
text:{0} value:{1} state:{2}", e.NodeText, e.NodeValue,
e.CheckedState.ToString() );
this.divConsole.InnerHtml += ( toConsole + "<br />" );
}
protected void astvMyTree_OnSelectedNodeChanged( object src,
ASTreeViewNodeSelectedEventArgs e )
{
string toConsole = string.Format( ">>OnSelectedNodeChanged selected:
text:{0} value:{1}", e.NodeText, e.NodeValue );
this.divConsole.InnerHtml += ( toConsole + "<br />" );
}
protected void btnGetSelectedNode_Click( object sender, EventArgs e )
{
string toConsole = string.Empty;
ASTreeViewNode selectedNode = astvMyTree.GetSelectedNode();
if( selectedNode == null )
toConsole = ">>no node selected.";
else
toConsole = string.Format( ">>node selected: text:{0} value:{1}",
selectedNode.NodeText, selectedNode.NodeValue );
this.divConsole.InnerHtml += ( toConsole + "<br />" );
}
protected void btnGetCheckedNodes_Click( object sender, EventArgs e )
{
List<ASTreeViewNode> checkedNodes = this.astvMyTree.GetCheckedNodes
( cbIncludeHalfChecked.Checked );
StringBuilder sb = new StringBuilder();
foreach( ASTreeViewNode node in checkedNodes )
sb.Append( string.Format( "[text:{0}, value:{1}]<br />",
node.NodeText, node.NodeValue ) );
this.divConsole.InnerHtml += ( string.Format( ">>nodes checked:
<div style='padding-left:20px;'>{0}</div>", sb.ToString() ) );
}
Having thousands of nodes? No problem, ASTreeView supports loading nodes using Ajax.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo5.aspx.
<ct:ASTreeView ID="astvMyTree"
runat="server"
BasePath="~/Javascript/astreeview/"
DataTableRootNodeValue="0"
EnableRoot="false"
EnableNodeSelection="true"
EnableCheckbox="true"
EnableDragDrop="false"
EnableTreeLines="true"
EnableNodeIcon="true"
EnableCustomizedNodeIcon="false"
EnableContextMenu="true"
EnableDebugMode="false"
EnableAjaxOnEditDelete="true"
AddNodeProvider="~/ASTreeViewDemo5.aspx"
AdditionalAddRequestParameters="{'t2':'ajaxAdd'}"
EditNodeProvider="~/ASTreeViewRenameNodeHandler.aspx"
DeleteNodeProvider="~/ASTreeViewDeleteNodeProvider.aspx"
LoadNodesProvider="~/ASTreeViewDemo5.aspx"
AdditionalLoadNodesRequestParameters="{'t1':'ajaxLoad'}"/>
protected override void Render( HtmlTextWriter writer )
{
if( Request.QueryString["t1"] == "ajaxLoad" )
{
string virtualParentKey = Request.QueryString["virtualParentKey"];
string para = string.Empty;// "= 1";
if( virtualParentKey == null )
para = " is NULL";
else
para = "=" + virtualParentKey;
string sql = @"SELECT p1.[ProductID] as
ProductID, p1.[ProductName] as ProductName,
p1.[ParentID] as ParentID, p3.childNodesCount as ChildNodesCount
FROM [Products] p1
LEFT OUTER JOIN
(
SELECT COUNT(*) AS childNodesCount , p2.[ParentID] AS pId
FROM [Products] p2
GROUP BY p2.[ParentID]
) p3
ON p1.[ProductID] = p3.pId
WHERE p1.[ParentID] " + para;
DataTable dt = OleDbHelper.ExecuteDataset( base.NorthWindConnectionString,
CommandType.Text, sql ).Tables[0];
ASTreeViewNode root = new ASTreeViewNode( "root" );
foreach( DataRow dr in dt.Rows )
{
string productName = dr["ProductName"].ToString();
string productId = dr["ProductID"].ToString();
string parentId = dr["ParentID"].ToString();
int childNodesCount = 0;
if( !string.IsNullOrEmpty( dr["ChildNodesCount"].ToString() ) )
childNodesCount = int.Parse( dr["ChildNodesCount"].ToString() );
ASTreeViewLinkNode node = new ASTreeViewLinkNode( productName, productId );
node.VirtualNodesCount = childNodesCount;
node.VirtualParentKey = productId;
node.IsVirtualNode = childNodesCount > 0;
node.NavigateUrl = "#";
node.AddtionalAttributes.Add( new KeyValuePair<string, string>
( "onclick", "return false;" ) );
root.AppendChild( node );
}
HtmlGenericControl ulRoot = new HtmlGenericControl( "ul" );
astvMyTree.TreeViewHelper.ConvertTree( ulRoot, root, false );
foreach( Control c in ulRoot.Controls )
c.RenderControl( writer );
}
else if( Request.QueryString["t2"] == "ajaxAdd" )
{
string addNodeText = Request.QueryString["addNodeText"];
int parentNodeValue = int.Parse( Request.QueryString["parentNodeValue"] );
string maxSql = "select max( productId ) from products";
int max = (int)OleDbHelper.ExecuteScalar
( base.NorthWindConnectionString, CommandType.Text, maxSql );
int newId = max + 1;
string sql = string.Format( @"INSERT INTO products
( productid, Discontinued, productname, parentid ) values( {0} ,0, '{1}', {2})"
, max + 1, addNodeText.Replace( "'", "''" ), parentNodeValue );
int i = OleDbHelper.ExecuteNonQuery
( base.NorthWindConnectionString, CommandType.Text, sql );
ASTreeViewNode root = new ASTreeViewNode( "root" );
ASTreeViewLinkNode node = new ASTreeViewLinkNode
( addNodeText, newId.ToString() );
node.NavigateUrl = "#";
node.AddtionalAttributes.Add( new KeyValuePair<string,
string>( "onclick", "return false;" ) );
root.AppendChild( node );
HtmlGenericControl ulRoot = new HtmlGenericControl( "ul" );
astvMyTree.TreeViewHelper.ConvertTree( ulRoot, root, false );
foreach( Control c in ulRoot.Controls )
c.RenderControl( writer );
}
else
base.Render( writer );
}
A tree node can be a hyper-link or LinkButton to perform postback.
ASDropDownTree inherits ASTreeView, looks like a DropDownList, multi-selection and single-selection are available by the control's configuration.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo6.aspx.
Nodes can be dragged and dropped across trees.
See live demo: http://www.astreeview.com/ASTreeViewDemo/ASTreeViewDemo7.aspx.
Now it is possible to add your customized ContextMenu Items to the menu. A screenshot:
To add your customized menu, it’s easy:
/// <summary>
/// initial controls, bind you events etc. here
/// </summary>
private void InitializeComponent()
{
this.astvMyTree.ContextMenu.MenuItems.Add( new ASContextMenuItem(
"Custom Menu 1", "alert('current value:' + "
+ this.astvMyTree.ContextMenuClientID
+ ".getSelectedItem().parentNode.getAttribute('treeNodeValue')"
+ ");return false;", "otherevent" ) );
this.astvMyTree.ContextMenu.MenuItems.Add( new ASContextMenuItem(
"Custom Menu 2", "alert('current text:' + "
+ this.astvMyTree.ContextMenuClientID
+ ".getSelectedItem().innerHTML"
+ ");return false;", "otherevent" ) );
}
Online demo: http://www.astreeview.com/astreeviewdemo/ASTreeViewDemo3.aspx.
In version 1.3.0, the end user can open the folder by clicking on the node text. It is useful when only the leaf nodes are clickable, for example, bookmarks.
To enable this feature, just set the “EnableParentNodeExpand” property of ASTreeView.
NodeText can be HTML:
this.astvMyTree.RootNode
.AppendChild( new ASTreeViewLinkNode
( "Accor <a href='http://www.astreeview.com' target='_blank'>see demo</a>"
, "Accor"
, "http://www.accor.com", "_self", "Goto Accor", "~/Images/demoIcons/accor.gif" )
.AppendChild( new ASTreeViewLinkNode( "Accor Services",
"Accor Services", http://www.accorservices.com,
"_self", "Goto Accor Services", "~/Images/demoIcons/accorservices.gif" ) )
.AppendChild( new ASTreeViewLinkNode( "Accor Hospitality",
"Accor Hospitality", "http://www.accorhotels.com", "_self",
"Goto Accor Hospitality", "~/Images/demoIcons/accorhospitality.gif" ) )
);
ASTreeView now supports themes! Developer can easily create his own theme for the treeview. Check out the demo.
Screenshot:
ASTreeView now supports rtl display, thank Mojtaba Vali for the suggestion! Also check out the demo.
In the new version, you may use HTML as tree node text, not only plain text.
Set the EnableMultiLineEdit property to enable this feature, the default is false.
I added a new client side event after drag and drop. to use:
<script type="text/javascript">
//parameter must be "elem"
function dndHandler( elem ){
document.getElementById( "<%=divConsole.ClientID %>" ).innerHTML
+= ( ">>node dragged:"
+ elem.getAttribute("treeNodeValue")
+ "<br />" );
}
</script>
and then set the OnNodeDragAndDropCompleteScript="dndHandler( elem )", visit demo.
Screenshot:
Set this property to false can disable dragging other nodes to the current node as child nodes. Please refer to sample 1 to see the effect.
If you use ASTreeView as a list, you can set EnableHorizontalLock to true , then the end user can only move the nodes up and down, not left nor right.
Screenshot:
If you want the end user just move the node within the same level as its original level, you may set the property EnableFixedDepthDragDrop=true, then the nodes can only be drag and drop to the same level as its original level, visit online demo.
OnNodeDragAndDropStartScript EventA new event OnNodeDragAndDropStartScript is now available for developers to execute some js when the end user start to drag nodes. Here’s a usage sample:
add a property for astreeview:
OnNodeDragAndDropStartScript="dndStartHandler( elem )"
the js function to handle start drag drop:
//parameter must be "elem"
functiondndStartHandler( elem ){
document.getElementById("").innerHTML
+= (">>drag started. [Node]"+ elem.getAttribute("treeNodeValue")
+" [Parent]:"+ elem.parentNode.parentNode.getAttribute("treeNodeValue")
+"
");
}
I spent two or three months in development, and the ASTreeView is finally finished. Now I would like to introduce it to you. Your feedback is appreciated!
The current version of ASTreeView is 1.4.0, visit for details.
In the release 1.4.0, several new features are added:
OnNodeDragAndDropStartScript Event In the release 1.3.0, several new features are added:
TreeNodeText supported ASTreeViewNode – EnableChildren 
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads.
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 6 Jan 2010 Editor: Sean Ewington |
Copyright 2009 by JIN Weijie Everything else Copyright © CodeProject, 1999-2010 Web17 | Advertise on the Code Project |
