[CLOSED] TreePanel scrollbar does not scroll to selected node

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] TreePanel scrollbar does not scroll to selected node

    Hi,
    I have a treepanel with so many nodes that when I expand it a vertical scrollbar appears.
    Now I want to "select" a specified node; the problem is that node is highlighted but vertical scrollbar does not scroll to it.
    Please see example below

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_tree.aspx.vb" Inherits="test_tree" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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">
        <script language="javascript" type="text/javascript">
            function ExpandTree(tree) {
                tree.expandAll();
            }
    
            function SetNodeTree(tree, idnodesel) {
                if (tree) {
                    if (idnodesel!="") {                    
                        var node = tree.getNodeById(idnodesel);
                        if (node) {
                            node.ensureVisible();
                            node.select();                                           
                        }
                    }
                }
            }
            
        </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="it-IT">
        </ext:ResourceManager>    
        <div>
        <ext:Panel ID="PanelGestioneDocumenti" runat="server" Height="500" Title="Gestione Documenti" Draggable="false" MonitorResize="true">
            <Content>
                <ext:BorderLayout ID="BorderLayout1" runat="server">                
                    <West Collapsible="false" Split="true">
                        <ext:Panel ID="PanelStruttura" runat="server" Title="" Width="290" Draggable="false">                        
                            <Content>
                                <ext:Panel ID="PanelAlbero"  runat="server" Border="false" Title="" Draggable="false" >
                                    <Items> 
                                        <ext:TreePanel ID="TreePanelDoc" runat="server" Title="" Border="false" Mode="Remote" Draggable="false" Height="490" AutoScroll="true" ContainerScroll="true"> <%--EnableDD="true">--%>
                                            <Root>
                                                <ext:TreeNode NodeID="ROOT" Text="ROOT" Expanded="true" Icon="Folder" Expandable="False" AllowChildren="true">                                            
                                                    <Nodes>       
                                                         <ext:TreeNode Text="Beethoven" Icon="UserGray">
                                                                <Nodes>
                                                                    <ext:TreeNode Text="Concertos" NodeID="1">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="1.1" Text="No. 1 - C" Icon="Music" />
                                                                            <ext:TreeNode NodeID="1.2" Text="No. 2 - B-Flat Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="1.3" Text="No. 3 - C Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="1.4" Text="No. 4 - G Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="1.5" Text="No. 5 - E-Flat Major" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                    <ext:TreeNode Text="Quartets" NodeID="2">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="2.1" Text="Six String Quartets" Icon="Music" />
                                                                            <ext:TreeNode NodeID="2.2" Text="Three String Quartets" Icon="Music" />
                                                                            <ext:TreeNode NodeID="2.3" Text="Grosse Fugue for String Quartets" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                    <ext:TreeNode Text="Sonatas" NodeID="3">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="3.1" Text="Sonata in A Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="3.2" Text="sonata in F Major" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                    <ext:TreeNode Text="Symphonies" NodeID="4">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="4.1" Text="No. 1 - C Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.2" Text="No. 2 - D Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.3" Text="No. 3 - E-Flat Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.4" Text="No. 4 - B-Flat Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.5" Text="No. 5 - C Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.6" Text="No. 6 - F Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.7" Text="No. 7 - A Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.8" Text="No. 8 - F Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="4.9" Text="No. 9 - D Minor" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                </Nodes>
                                                            </ext:TreeNode>
                                                            <ext:TreeNode Text="Brahms" Icon="UserGray" NodeID="5">
                                                                <Nodes>
                                                                    <ext:TreeNode Text="Concertos" NodeID="5.1">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="5.1.1" Text="Violin Concerto" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.1.2" Text="Double Concerto - A Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.1.3" Text="Piano Concerto No. 1 - D Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.1.4" Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                    <ext:TreeNode Text="Quartets" NodeID="5.2">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="5.2.1" Text="Piano Quartet No. 1 - G Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.2.2"  Text="Piano Quartet No. 2 - A Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.2.3" Text="Piano Quartet No. 3 - C Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.2.4" Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                    <ext:TreeNode Text="Sonatas" NodeID="5.3">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="5.3.1" Text="Two Sonatas for Clarinet - F Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.3.2" Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                    <ext:TreeNode Text="Symphonies" NodeID="5.4">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="5.4.1" Text="No. 1 - C Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.4.2" Text="No. 2 - D Minor" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.4.3" Text="No. 3 - F Major" Icon="Music" />
                                                                            <ext:TreeNode NodeID="5.4.4" Text="No. 4 - E Minor" Icon="Music" />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                </Nodes>
                                                            </ext:TreeNode>
                                                            <ext:TreeNode Text="Mozart" Icon="UserGray" NodeID="6">
                                                                <Nodes>
                                                                    <ext:TreeNode Text="Concertos" NodeID="6.1">
                                                                        <Nodes>
                                                                            <ext:TreeNode NodeID="6.1.1" Text="Piano Concerto No. 12" Icon="Music"  />
                                                                            <ext:TreeNode NodeID="6.1.2" Text="Piano Concerto No. 17" Icon="Music"  />
                                                                            <ext:TreeNode NodeID="6.1.3" Text="Clarinet Concerto" Icon="Music"  />
                                                                            <ext:TreeNode NodeID="6.1.4" Text="Violin Concerto No. 5" Icon="Music"  />
                                                                            <ext:TreeNode NodeID="6.1.5" Text="Violin Concerto No. 4" Icon="Music"  />
                                                                        </Nodes>
                                                                    </ext:TreeNode>
                                                                </Nodes>
                                                            </ext:TreeNode>
                                                    </Nodes>    
                                                </ext:TreeNode>                                                                                   
                                            </Root>                                                    
                                               
                                            <Listeners>
                                                <AfterRender Handler="ExpandTree(this); SetNodeTree(this,'5.3.2');" />
                                            </Listeners>                                                                              
                                        </ext:TreePanel>    
                                    </Items>
                                </ext:Panel>                            
                            </content>
                        </ext:Panel>                
                    </West>
                    <Center Collapsible="false" Split="true">
                        <ext:Panel ID="Panel2" runat="server" Title="" AutoScroll="false" Draggable="false">
                        </ext:Panel>
                    </Center>                
                </ext:BorderLayout>
            </Content>
        </ext:Panel>
        </div>
        </form>
    </body>
    </html>
    Many thanks for any suggestion
    Last edited by Daniil; Feb 09, 2012 at 12:18 PM. Reason: [CLOSED]
  2. #2
    Hi,

    To get all nodes expanded initially I would suggest the following TreePanel's BeforeAppend listener:
    <BeforeAppend Handler="if (!node.isLeaf()) {
                                        node.expanded = true;
                                    }" />
    Generally, it's just a short way to set up Expanded="true" for all non-leaf nodes.

    To select and scroll to a node, I would suggest the following TreePanel's AfterRender listener.
    <AfterRender Handler="var node = this.getNodeById('5.3.2');
                                    node.ensureVisible(function () {
                                        this.select();
                                    });" />
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    To get all nodes expanded initially I would suggest the following TreePanel's BeforeAppend listener:
    <BeforeAppend Handler="if (!node.isLeaf()) {
                                        node.expanded = true;
                                    }" />
    Generally, it's just a short way to set up Expanded="true" for all non-leaf nodes.

    To select and scroll to a node, I would suggest the following TreePanel's AfterRender listener.
    <AfterRender Handler="var node = this.getNodeById('5.3.2');
                                    node.ensureVisible(function () {
                                        this.select();
                                    });" />


    Hi Daniil,
    it works for first time; if I want to "reload" tree and reselect node AfterRender listener is ignored so I have the same problem.
  4. #4
    How do you reload the tree?
  5. #5
    Quote Originally Posted by Daniil View Post
    How do you reload the tree?
    Because I built tree runtime and after removing or adding nodes I have to "refresh" it and I preferred to re-build it.
  6. #6
    Well, it's clear but I asked how you do that, not why.

    If you use the reload method:
    http://docs.sencha.com/ext-js/3-4/#!...-method-reload
    you can set up a callback function.
  7. #7
    Quote Originally Posted by Daniil View Post
    Well, it's clear but I asked how you do that, not why.

    If you use the reload method:
    http://docs.sencha.com/ext-js/3-4/#!...-method-reload
    you can set up a callback function.


    oh, sorry.... in this way:

    server:
    
        <Ext.Net.DirectMethod()> _
        Public Shared Function RefreshTree(ByVal siteid As String) As String
            Dim nodes As Ext.Net.TreeNodeCollection = CreateTree(siteid)
            Return nodes.ToJson()
        End Function
    
    
    client:
    
            function js_LoadTree(obj, tree, chiave, idnodesel) {                    
                Ext.net.DirectMethods.RefreshTree(obj.value, 
                   {
                       success: function (result) {
                           RefreshTreeOK(result, tree,idnodesel);
                       },
                       timeout: 180000
                   }
                );
            }
    
            function RefreshTreeOK(result, tree, idnodesel) {
                var nodes = eval(result);            
                tree.getRootNode().removeChildren();
                if (nodes.length > 0) {
                    tree.getRootNode().appendChild(nodes);
                    tree.expandAll();
                    if idnodesel!="") {                    
                        var node = tree.getNodeById(idnodesel); 
                        if (node) {                                                        
                            node.ensureVisible();
                            node.select();            
                        }
                    }
                }            
            }
    you need other informations?
  8. #8
    If you use the BeforeAppend listener from the previous post, you should be able to remove:
    tree.expandAll();
    Regarding to:
    if (node) {                                                       
        node.ensureVisible();
        node.select();           
    }
    Did you try the same thing as in AfterRender?
    node.ensureVisible(function () {
        this.select();
    });
  9. #9
    Quote Originally Posted by Daniil View Post
    If you use the BeforeAppend listener from the previous post, you should be able to remove:
    tree.expandAll();
    Regarding to:
    if (node) {                                                       
        node.ensureVisible();
        node.select();           
    }
    Did you try the same thing as in AfterRender?
    node.ensureVisible(function () {
        this.select();
    });

    I do all things you suggest to me; but AfterRender listener is "called" only one time at design treepanel
  10. #10
    Well, I know about AfterRender.

    I see that you use the following code within the "success" handler of the DirectMethod:
    if (node) {                                                       
    
        node.ensureVisible();
        node.select();           
    }
    But did you try the same code as it's done in the AfterRender listener?
    node.ensureVisible(function () {
    
        this.select();
    });
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Oct 10, 2011, 1:29 AM
  2. [CLOSED] Treepanel selected node server side
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 09, 2011, 1:49 PM
  3. Selected Node Id of a TreePanel
    By Z in forum 1.x Help
    Replies: 1
    Last Post: Jul 21, 2010, 8:26 AM
  4. Treepanel - Set Selected Node
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Dec 01, 2009, 4:46 PM
  5. [CLOSED] TreePanel selected node
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 24, 2009, 6:47 AM

Posting Permissions