Welcome Guest Search | Active Topics | Sign In | Register

TreeNode - EnsureVisible() Method Options
mburolla
Posted: Monday, May 18, 2009 5:02:40 PM
Rank: Advanced Member
Groups: Member

Joined: 4/13/2009
Posts: 37
I'm not sure if I'm using the EnsureVisible() method correctly for a TreeNode. When I add a new node to a treeview, the scroll bar doesn't scroll to my new node if it's not visible. Here's a simple example:

Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="JungleDiskUI2.tree" %>
<%@ Register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <eo:TreeView runat="server" ID="TreeView1"  AutoExpandOnClick="false"
        ControlSkinID="None" Height="138px" onitemclick="TreeView1_ItemClick" 
        OnItemPopulate="TreeView1_ItemPopulate" Width="159px" AllowDragDrop="True">
        <LookNodes>
            <eo:TreeNode CollapsedImageUrl="00030301" 
                DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;" 
                ExpandedImageUrl="00030302" ImageUrl="00030301" ItemID="_Default" 
                NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none" 
                SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
            </eo:TreeNode>
            <eo:TreeNode CollapsedImageUrl="00101022" 
                DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;" 
                ExpandedImageUrl="00101022" ImageUrl="00101022" ItemID="_FileNode" 
                NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none" 
                SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
            </eo:TreeNode>
        </LookNodes>
        <TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
        </TopGroup>
    </eo:TreeView>
    
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    
    </div>
    </form>
   
</body>
</html>


C#:

Code: C#
public partial class tree : System.Web.UI.Page
    {
        private const string rootNode = "r\\root";
       // private const string rootNode = "root";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                EO.Web.TreeNode tn = new EO.Web.TreeNode(rootNode);
				tn.PopulateOnDemand = true;
				tn.RaisesServerEvent = NullableBool.True;
                tn.ItemID = rootNode;
				tn.AllowDrag = NullableBool.True;
				tn.AllowDrop = NullableBool.True;
				this.TreeView1.TopGroup.Nodes.Add(tn);
            }
        }

        protected void TreeView1_ItemClick(object sender, EO.Web.NavigationItemEventArgs e)
        {
            Label1.Text = "Path: " + e.TreeNode.Path;  
        }

        protected void TreeView1_ItemPopulate(object sender, EO.Web.NavigationItemEventArgs e)
        {
			// Create directories...
			foreach (string s in CreateDir(e.TreeNode.ItemID))
			{
				EO.Web.TreeNode newNode = new EO.Web.TreeNode(s);
				newNode.ItemID = s;
				newNode.PopulateOnDemand = true;
				newNode.AllowDrag = NullableBool.True;
				newNode.AllowDrop = NullableBool.True;
				e.TreeNode.ChildNodes.Add(newNode);
			}

			// Create files...
			foreach (string s in CreateFiles(e.TreeNode.ItemID))
			{
				EO.Web.TreeNode newNode = new EO.Web.TreeNode(s);
				newNode.ItemID = s;
				newNode.PopulateOnDemand = false;
				newNode.LookID = "_FileNode";
				newNode.AllowDrag = NullableBool.True;
				newNode.AllowDrop = NullableBool.False;
				e.TreeNode.ChildNodes.Add(newNode);
			}
        }
		
        private List<string> CreateDir(string dirName)
        {
            List<string> retval = new List<string>();

            switch (dirName)
            {
                case rootNode:
                    retval.Add("DDirectory 1");
					break;
				case "DDirectory 1":
                    retval.Add("DDirectory 2");
					break;
                case "DDirectory 2":
					retval.Add( "DDirectory 3" );
					break;
                case "DDirectory 3":
                    retval.Add("DDirectory 4");
                    break;
			}

            return retval;
        }

        private List<string> CreateFiles(string dirName)
        {
            List<string> retval = new List<string>();

            switch (dirName)
            {
                case rootNode:
                    retval.Add("FFile1");
                    retval.Add("FFile2");
                    retval.Add("FFile3");
                    retval.Add("FFile4");
                    retval.Add("FFile5");
                    retval.Add("FFile6");
                    retval.Add("FFile7");
                    retval.Add("FFile8");
                    retval.Add("FFile9");
                    retval.Add("FFile10");
                    retval.Add("FFile11");
                    retval.Add("FFile12");
                    retval.Add("FFile13");
                    break;
				case "DDirectory 1":
					retval.Add("FFile'2");
                    retval.Add("FFile 2");
					break;
				case "DDirectory 2":
                    retval.Add("FFile'3");
                    retval.Add("FFile 3");
					break;
                case "DDirectory 3":
                    retval.Add("FFile'4");
                    retval.Add("FFile 4");
                    break;
			}

            return retval;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            EO.Web.TreeNode tn = this.TreeView1.SelectedNode;

            if (tn != null)
            {
                EO.Web.TreeNode newNode = new EO.Web.TreeNode();
                newNode.Text = "Can you see me?"; // Scroll bar doesn't scroll down for this guy.
                newNode.EnsureVisible();
                tn.ChildNodes.Add(newNode);
            }
        }
    }


Steps to reproduce:

Expand the root node (left click).
Left click on the root node (selecting it).
Click the "Submit" button.
Scroll down to see the new node.

Should the TreeView automatically scroll down to the newly created node?

Thanks,
Marty

eo_support
Posted: Tuesday, May 19, 2009 9:56:54 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You need to call EnsureVisible after you add it to the TreeView.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.