Home - Forums-.NET - FlyTreeView (ASP.NET) - Dynamic height

FlyTreeView (ASP.NET)

Technical support and KB related to the FlyTreeView control

This forum related to following products: FlyTreeView for ASP.NET
Dynamic height
Link Posted: 08-Jan-2008 04:04
stefan avatar
stefan
Total Posts:0
Joined:11/23/2024
I have an application using the FlyTreeView. It is very common for people at my company to use either laptops or workstations to access the application. Since the users resolution may vary,  I do not want to set the height to a fixed value. I really want the FlyTreeView to take up 100% of the available, visible, space. If clipped, a scrollbar shold be displayed. Setting height="100%" doesn''t seem to work   . Using client side java script for detecting window size and setting the height might work, but has anyone an html-only solution?

Regards,

Stefan Akerberg
Link Posted: 08-Jan-2008 05:44
EvgenyT avatar
EvgenyT
Total Posts:0
Joined:11/23/2024
Setting 100% height of HTML elements is a common headache for the whole web industry  
FlyTreeView uses DIV element as its root. You can see styles it uses for the root DIV element and try to apply your own to override rendered by treeview.
Simple setting DIV height to 100% would give nothing. You can google out reasons and possible workarounds for the issue:http://www.google.com/search?q=100%25+height+CSS

From my point of view. You can try to create 100% height table (height=100% seems to work for TABLEs) and place FlyTreeView in it (leave its height blank). Though, I didn't try this approach.

Anyway, if you have a solution, please let me know here, so we may consider to include "100% height" option as a new feature for the webcontrol.

Thanks.
Link Posted: 23-Jan-2008 21:15
stefan avatar
stefan
Total Posts:0
Joined:11/23/2024
After throwing various ideas at this problem, I finally got something that seems to work. Hopefully
someone finds this useful.

PROBLEM:
Have the FlyTreeView control adjust its height dynamically according to the current browser height.

SOLUTION:
Basically I ended up writing a small javascript which set the height (in px) of the FlyTreeView-control. To calculate the proper height I used the flytreecontrol and added all the offsets to each parent all the way up and subtracted this from the clientHeight of the document.

I then set up the script to be called when either the onload event or the onresize events were fired.
onload - Here I used the document.readyState to make sure it was called when complete.
onresize - Used a timer to get rid of flickering. The event is fired several times during a single resize and I really
only want to handle this once.

In the aspx-file I also registered a script for emitting the ClientID of the FlyTreeView-control

CODE SNIPPETS:

//Returns left and top position of an element.
function findPos(obj) {
  //Code excluded. Please refer to http://www.quirksmode.org/js/findpos.html
  //for details.
}

//Calculate and set new height.
function setTreesize() {
      getTreeObject().style.height = document.documentElement.clientHeight - findPos(getTreeObject())[1];
}  


//Refer to http://www.webdeveloper.com/forum/archive/index.php/t-72593.html
onresize=function(){
clearTimeout(resizeDelay);
resizeDelay=setTimeout("setTreesize()", 200);
}                      
                    
//Yep...Straight from MSDN
document.onreadystatechange=fnStartInit;
function fnStartInit()
{
    if (document.readyState=="complete")
    {
        setTreesize();
     }
}

In the .aspx.cs file I added the following i?n Page_Load where guidelineTree is my control id :

        ClientScriptManager cs = Page.ClientScript;
        if (!cs.IsClientScriptBlockRegistered("treeClientID"))
        {
            cs.RegisterClientScriptBlock(this.GetType(), "treeObjectScript", "function getTreeObject(){return document.getElementById(\"" + guidelineTree.ClientID + "\");}", true);
        }



There. Maybe not a beautiful solution but it works for me  

Any comments welcome!

Regards,

Stefan Akerberg
Link Posted: 24-Jan-2008 02:33
EvgenyT avatar
EvgenyT
Total Posts:0
Joined:11/23/2024
Stefan,

Thanks for your great code snippets!

This looks like a nice workaround for the issue. At least for IE.
Share:

Company  |  Privacy  |  Legal Information

© 1999-2024 9Rays.Net. All rights reserved.