Click here to Skip to main content
Click here to Skip to main content

TreeWeb - custom ASP.NET control

, 2 Mar 2003
Rate this:
Please Sign up or sign in to vote.
A tree control that can be used in every website based on ASP.NET.
<!-- Article image -->

Sample Image - TreeWeb.gif

<!-- Add the rest of your HTML here -->

Introduction

There are not so many to say about this article. It simply offers an implementation for an ASP.NET custom tree control.

Almost three years ago I was trying to implement a tree control in raw asp (http://www.codeproject.com/asp/treecontrol.asp). At that time I realized how many things are missing the web developers that decided to implement their applications using Microsoft Technologies comparing with their colleagues that are using Java Technologies.

No longer after that I heard for the first time about the new technology (.NET) that Microsoft wants to have. From then I was trying in my free available time (which is not so much) to read about .NET and to keep track with the news about it. When I gathered enough information about .NET and the support it offers (not only) for the web applications developers on Microsoft platforms, I understood that finally they could compete with the Java web applications developers. With ASP.NET Microsoft jumped "tree big steps" ahead in supporting the web applications on Windows platforms.

UML Diagram

The diagram describes the basic architecture of the control. 

UML Diagram

iiuga.Web.UI.TreeWeb

TreeWeb class.

Properties

Elements Gets the elements collection of the tree.
CollapsedElementImage Gets or sets the URL to the image that is showen for a collapsed element.
ExpandedElementImage Gets or sets the URL to the image that is showen for an expanded element.
CheckBoxes Gets or sets whether check boxes are displayed next to the tree elements in the treeweb control.
Target Gets or sets the default target for all tree elements action.
ImageList Gets the collection of images urls for the TreeWeb control.
DefaultElementCssClass Gets or sets the default CssClass for the tree elements.
DefaultElementCssClassOver Gets or sets the default CssClass for the tree elements when OnMouseOver client event occure. [Not Implemented]

Methods
#ctor TreeWeb constructor
RaisePostBackEvent (IPostBackEventHandler.RaisePostBackEvent) Raise control specific events on post back.
LoadXML Loads the tree structure from a XML file. [Not Implemented]
SaveXML Saves the structure of the tree in a XML structure. [Not Implemented]
Render Render the TreeWeb control.
SaveViewState (IStateManager.SaveViewState) Saves the changes of TreeWeb's view state to an Object.
LoadViewState (IStateManager.LoadViewState) Loads the TreeWeb's previously saved view state.
TrackViewState (IStateManager.TrackViewState) Instructs the TreeWeb to track changes to its view state.

Events
Expand Occurs when an tree element is expanded.
Collapse Occurs when an tree element is collapsed.

iiuga.Web.UI.TreeElement

TreeElement class.

Properties

ID Gets the ID of the TreeElement.
Text Gets or sets the text to be displayed for the TreeElement.
Elements Gets the ElementsCollection for the TreeElement.
Parent Gets the TreeElement parent object for the current element.
TreeWeb Gets the TreeWeb object.
IsExpanded Gets whether the element is expanded or not.
HasElements Gets whether the element has or not children elements.
Level Gets the level where the element is in the tree.
IsChecked Gets whether the element is checked or not. [Not Implemented]
Key Gets or sets specific data for the tree element.
NavigateUrl Gets or sets the action for the tree element.
Target Gets or sets the target of the tree element action.
CheckBox Gets or sets whether a check box is displayed next to the current element.
ToolTip Gets or sets the ToolTip display text for the current element.
Enabled Gets or sets whether the current element is enabled or not.
CssClass Gets or sets the default CssClass for an element.
CssClassOver Gets or sets the default CssClass for the element when OnMouseOver client event occure. [Not Implemented]
ImageIndex Gets or sets the image index to be showen before the element in the tree.
IsTrackingViewState

Methods
#ctor TreeElement constructor.
#ctor TreeElement constructor.
#ctor TreeElement constructor.
Expand Expand current element, it has effect only if it has elements.
Collapse Collapse current element, it has effect only if it has elements.
FindElement Finds a specified child element of current tree element.
SaveViewState (IStateManager.SaveViewState) Saves the changes of TreeElement's view state to an Object.
LoadViewState (IStateManager.LoadViewState) Loads the TreeElement's previously saved view state.
TrackViewState (IStateManager.TrackViewState) Instructs the TreeElement to track changes to its view state.

Using the code

... as any other web server control.

//
// build the tree structure inside the web form
//

<%@ Register TagPrefix="iiuga" Namespace="iiuga.Web.UI" 
             Assembly="TreeWebControl" %>

...
    
<iiuga:treeweb id="_treeWeb" runat="server" CollapsedElementImage="plus.jpg" 
        ExpandedElementImage="minus.jpg">
<ImageList> 
    <iiuga:ElementImage ImageUrl="icon1.gif"></iiuga:ElementImage>
</ImageList>
<Elements>
    <iiuga:treeelement text="Your Online Radio Stations" 
           CssClass="Sample3_Header">
</iiuga:treeelement>
    <iiuga:treeelement text="Classic Rock & Oldie" 
           ToolTip="Classic Rock & Oldie">
    <Elements>
        <iiuga:treeelement text="All Rock" ImageIndex="0" ToolTip="AllRock">
</iiuga:treeelement>
        <iiuga:treeelement text="Classic Rock" ImageIndex="0" 
               ToolTip="ClassicRock"></iiuga:treeelement>
        <iiuga:treeelement text="Elvis Rocks!" ImageIndex="0" 
               ToolTip="ElvisRocks!"></iiuga:treeelement>
        <iiuga:treeelement text="Oldies" 
              NavigateURL="javascript:alert('Oldies');"></iiuga:treeelement>
    </Elements>
    </iiuga:treeelement>
    <iiuga:treeelement text="Classical" ToolTip="Classical" 
           CssClass="Sample3_ElementNode">
    <Elements>
        <iiuga:treeelement text="20th Century" 
                ToolTip="20thCentury"></iiuga:treeelement>
        <iiuga:treeelement text="Opera" ImageIndex="0" 
                ToolTip="Opera"></iiuga:treeelement>
        <iiuga:treeelement text="Top Classical" 
                ToolTip="TopClassical"></iiuga:treeelement>
    </Elements>
    </iiuga:treeelement>
</Elements>
</iiuga:treeweb>

 OR

//
// dynamically add elements inside the tree
//

...

protected iiuga.Web.UI.TreeWeb _treeWeb;

...
    
int _elementIndex = _treeWeb.Elements.Add( "New TreeElement" );
_treeWeb.Elements[_elementIndex].CssClass = "CssClass";
_treeWeb.Elements[_elementIndex].Key = "Key";
_treeWeb.Elements[_elementIndex].ToolTip = "New TreeElement ToolTip";
    
...

... at the end

The control is far from being complete, some of its methods are not yet implemented and are nice features that can be included. But how it is now covers the normal needs of any website developer, it is a base for somebody who wants to extends its functionality and is an example for everyone who starts to develop custom server controls. For getting new versions of the TreeWeb control, for reporting bugs or for asking me any questions please feel free to go to my webpage and do it. Thanks.

Copyright

The article, as well as any accompanying source code and compiled binaries, are subject to local and international copyright laws and all rights are reserved by Iulian Iuga.

The code described in the article is available in the public domain and can be incorporated, either in its entirely or modified, into client applications. Permission is never granted for including, delivering or selling it as part of any collection of software tools.

When using or providing any of the accompanying code, please provide acknowledgment of the author. All final products must include the phrase "Portions copyright ) 2003 by Iulian Iuga" in the about screen, or where appropriate.

The source code and compiled binaries were never used in production environment and was never intended too, the author is not responsible for any damages produced by using it in that manner.

History

3 March 2003 - Submitted.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Iulian Iuga
Web Developer
Germany Germany
No Biography provided

Comments and Discussions

 
GeneralThankyou! Pinmemberlove_big_cat2-Apr-08 17:29 
QuestionJava Script for ExpandAll / Contract All PinmemberLustForDotnet16-Jan-07 19:58 
AnswerRe: Java Script for ExpandAll / Contract All Pinmemberprasanthikushal16-Jan-07 23:02 
Questionhow to collapse or expand using javascript Pinmemberprasanthikushal28-Dec-06 17:57 
AnswerRe: how to collapse or expand using javascript Pinmemberprasanthikushal16-Jan-07 19:36 
GeneralRe: how to collapse or expand using javascript PinmemberLustForDotnet17-Jan-07 19:48 
QuestionASPNET20 Pinmemberandré_k29-Jun-06 8:49 
QuestionCssClass Issue Pinmembershellymidha12-Jun-06 2:16 
Questionhow to check with this tree control Pinmemberkhawar abbas zaidi7-Feb-06 3:38 
QuestionUpdated TreeWeb version? PinmemberJeanGael21-Oct-05 11:20 
GeneralAutoPostBack PinmemberMatteo Pietri24-Aug-05 4:38 
GeneralIsChecked state PinmemberVyjayanthi4-Aug-05 7:14 
GeneralRe: IsChecked state Pinmemberkendyman77731-Jul-07 5:06 
GeneralExpand,collapse not workin when used in .ascx Pinmembernikhil vaghela30-May-05 1:52 
GeneralRe: Expand,collapse not workin when used in .ascx PinmemberAlex Fil6-Jun-05 23:37 
GeneralNice Job PinmemberMagadass17-Apr-05 19:20 
GeneralDynamicly creating the webTree PinmemberWvEck7-Apr-05 6:39 
GeneralRe: Dynamicly creating the webTree Pinmemberpjm8155919-Apr-07 11:32 
GeneralCssClassOver PinmemberSamuel A.C. Martins12-Mar-05 23:38 
GeneralRe: CssClassOver PinmemberIulian Iuga8-Apr-05 0:48 
Generalre-rendering on expand and collapse Pinmemberchait20-Nov-04 23:02 
GeneralRe: re-rendering on expand and collapse PinmemberIulian Iuga29-Nov-04 0:17 
GeneralRe: re-rendering on expand and collapse Pinmemberchait3-Dec-04 14:57 
GeneralRe: re-rendering on expand and collapse PinmemberIulian Iuga9-Dec-04 4:28 
GeneralRe: re-rendering on expand and collapse Pinmemberchait9-Dec-04 21:41 
General&quot;installation&quot; issues Pinmemberlcdta5-Nov-04 2:28 
GeneralRe: &quot;installation&quot; issues PinmemberIulian Iuga5-Nov-04 5:17 
QuestionHow to get the Element that is clicked on? Pinmemberrsjagtia29-Sep-04 9:23 
GeneralAmazing Pinmemberjleung16-Sep-04 17:40 
QuestionHow do I add things programmitcally? Pinmemberkamrumohammed6-Sep-04 3:35 
Generalcheck box Persistence Pinmemberproaer@freefast.it29-Jun-04 5:45 
GeneralRe: check box Persistence Pinmemberjorgetadeu6-Apr-05 15:53 
GeneralRe: check box Persistence PinmemberIulian Iuga8-Apr-05 0:52 
Generalfolders without element same indentation Pinmemberlogistum8-Jun-04 7:37 
GeneralRe: folders without element same indentation PinmemberIulian Iuga17-Jun-04 0:49 
GeneralParent property is read-only and cannot be set. Pinmemberbunnybutton4-Jun-04 8:28 
GeneralRe: Parent property is read-only and cannot be set. PinmemberIulian Iuga22-Jun-04 3:35 
GeneralClientside expand/collapse PinmemberDeyan Petrov28-May-04 6:54 
GeneralRe: Clientside expand/collapse PinmemberIulian Iuga28-May-04 21:39 
GeneralThanks Pinmember매커27-May-04 17:03 
GeneralRe: Thanks PinmemberIulian Iuga27-May-04 21:55 
QuestionVB Version? Pinmemberpllms17-May-04 20:37 
AnswerRe: VB Version? PinmemberIulian Iuga27-May-04 22:02 
GeneralChild nodes Pinmembersoltan85-May-04 4:36 
GeneralRe: Child nodes PinmemberIulian Iuga5-May-04 5:29 
GeneralRe: Child nodes PinmemberIulian Iuga5-May-04 5:30 
GeneralRe: Child nodes/ Tree State Pinmembersoltan86-May-04 7:45 
GeneralRe: Child nodes/ Tree State PinmemberIulian Iuga27-May-04 22:09 
GeneralRe: Child nodes/ Tree State PinmemberJay Dubal3-Mar-05 18:09 
GeneralTreeWeb further versions PinmemberIulian Iuga19-Feb-04 23:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411019.1 | Last Updated 3 Mar 2003
Article Copyright 2003 by Iulian Iuga
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid