This is a migrated thread and some comments may be shown as answers.

Relative Height

8 Answers 125 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Michael Ward asked on 27 Mar 2009, 04:31 AM

Hi,

we are having trouble with a treeview we are using in a navigation panel.
Since we need to support different client resolutions we have to use relative height for the control.
But if we put the tree control into a div or table with relative height and don't give the tree a absolute height, the tree will overlay the next element, disregarding the height of the parent container (in any other browser than IE).
We found a way to fix the height using javascript, but then the scroll position will not be retained.
I will post a simple example below. The commented out javascript was a try to fix the height on resizing.
What we need is a solution that will work with relative height, for all major browsers and will maintain the scroll position on expand.
Any ideas would be appreciated.

Cheers,
Michael

Aspx:

    
            <body onload="fixTreeHeights()" onresize="fixTreeHeights()"> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 
        
                    <div id="wrapperDiv" style="height:50%;border:1px solid black;"> 
        
                        <telerik:RadAjaxPanel ClientEvents-OnResponseEnd="fixTreeHeights()" ID="ajaxPanel" runat="server"> 
        
                            <telerik:RadTreeView style="overflow:auto;" 
        
                                OnNodeExpand="tree_NodeExpand" ID="tree" RetainScrollPosition="true" runat="server" Height="100%"> 
        
                            </telerik:RadTreeView> 
        
                        </telerik:RadAjaxPanel> 
        
                    </div> 
        
                    <div style="height:50%;"> 
        
                        Footer 
        
                    </div> 
        
                </form> 
        
                <script type="text/javascript"> 
        
                    function fixTreeHeights() { 
        
            //          var panelBar = document.getElementById("wrapperDiv"); 
        
            //          var documentdocumentTree = document.getElementById('<%= tree.ClientID %>'); 
        
            //          if (panelBar.offsetHeight > 0) { 
        
            //              var intCompensate = 0; 
        
            //              var documentdocumentObj = document.documentElement; 
        
            //              if ((window.opera) || (document.all && (!(document.compatMode && document.compatMode == "CSS1Compat")))) { 
        
            //                  documentdocumentObj = document.body; 
        
            //              } 
        
            //              documentTree.style.height = (parseInt(documentObj.clientHeight) - intCompensate) + "px"; 
        
            //              documentTree.style.width = (documentObj.clientWidth) + 'px'; 
        
            //              if (window.scrollDocumentTreeSelectedNode) scrollDocumentTreeSelectedNode(); 
        
            //          } 
        
                    }     
        
                </script>  
        
            </body>

and the codebehind:

    
            protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        if(!IsPostBack) 
        
                        { 
        
                            tree.Nodes.Clear(); 
        
                            for(var i = 0; i < 100; i++) 
        
                            { 
        
                                var node = new RadTreeNode 
        
                                               { 
        
                                                   Text = "node" + i, 
        
                                                   ExpandMode = TreeNodeExpandMode.ServerSide, 
        
                                                   Expanded = false, 
        
                                               }; 
        
                                tree.Nodes.Add(node); 
        
                            } 
        
                        } 
        
                    } 
        
                    protected void tree_NodeExpand(object sender, RadTreeNodeEventArgs e) 
        
                    { 
        
                        var node = new RadTreeNode {Text = "child", ExpandMode = TreeNodeExpandMode.ServerSide}; 
        
                        e.Node.Nodes.Add(node); 
        
                        e.Node.Expanded = true; 
        
                        e.Node.ExpandMode = TreeNodeExpandMode.ClientSide; 
        
                    }

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Relative Height

8 Answers, 1 is accepted