Asp.Net TreeView on the client side events - JavaScript

If you wanted to use System.Web.UI.WebControls.TreeView, Did you notice that it
works only on server side?

How can I add a css style to a node?
How Ican I add JavaScript to the TreeView.

It's a trick.

You need to inherit System.Web.UI.WebControls.TreeView and System.Web.UI.WebControls.TreeNode
and create two new classes.

On the TreeNode you need to build

1. Constructors based on the base constructors.

2.  Build the new properties (line onclick,
Style, Etc.)

3. Override two methods: RenderPreText and RenderPostText

Here is a simple code for the new class TreeNode:

    public class MyTreeNode : TreeNode

    {
        #region -- Constructors --

   
public MyTreeNode() : base() { }
public MyTreeNode(string Text) : base(Text) { }

public MyTreeNode(string Text,
string Value) : base(Text, Value){ }     
public MyTreeNode(System.Web.UI.WebControls.TreeView
owner, bool isRoot) :base(owner, isRoot) { }
public MyTreeNode(string Text,
string Value, string ImageUrl) :base(Text, Value, ImageUrl) { }
public MyTreeNode(string Text, string Value, string ImageUrl,
string navUrl, string target): base(Text, Value, ImageUrl, navUrl, target) { }
        #endregion
        #region -- Properties --
private string _cssClass;
public string My_CssClass

        {

            get { return _cssClass;}

            set { _cssClass = value;}

        }
private string _onClick;

public string My_OnClickClient

        {

            get { return _onClick;}

            set { _onClick = value;}

        }

private string _style;
public string My_Style

        {

            get { return _style;}

            set { _style = value;}

        }

private string _clientId;
   public string My_ClientId

        {

            get { return _clientId;}

            set { _clientId = value;}

        }

private string _clientName;
public string My_ClientName

        {

            get { return _clientName;}

            set { _clientName = value; }

        }

private string _onmouseover;
public string My_Onmouseover

        {

            get { return _onmouseover;}

            set { _onmouseover = value;}

        }

        #endregion
        #region -- Overrides --
protected override void RenderPreText(HtmlTextWriter writer)

        {

            writer.AddAttribute(

              HtmlTextWriterAttribute.Class, My_CssClass);

            writer.AddAttribute(

              HtmlTextWriterAttribute.Onclick, My_OnClickClient);

            writer.AddAttribute(

              HtmlTextWriterAttribute.Style, My_Style);

            writer.AddAttribute(

              HtmlTextWriterAttribute.Id, My_ClientId);

            writer.AddAttribute(

       HtmlTextWriterAttribute.Name,My_ClientName);

            writer.AddAttribute("onmouseover", My_Onmouseover);

            writer.RenderBeginTag(HtmlTextWriterTag.Div);

            base.RenderPreText(writer);

        }

       
protected override void RenderPostText(HtmlTextWriter writer)

        {

            writer.RenderEndTag();

            base.RenderPostText(writer);

        }

        #endregion

    }

Now you have to change the TreeView that will work with your TreeNode.

All you need is to build a constructor that reads your TreeNode

Here is a simple code

public class MyTreeView : System.Web.UI.WebControls.TreeView

    {   
protected override TreeNode CreateNode()

        {

            return new MyTreeNode(this, false);

        }

    }

Now you have your properties on all nodes that you have, like

Code example:

MyTreeNode  node = new MyTreeNode(Text, ID, ImageUrl, .NavigateUrl,, "");

node.My_CssClass = "MyNode";

node.My_ClientId = "MyNode";

That all,

Roi Kolbinger