TreeList overall height resize from client side.

[bogdan]

Hello.
I seem to not be able to find a client side method that resizes/re-set's the TreeList's height.

the example code is pretty straight forward :

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">

                Sys.Application.add_load(LoadValues);

                function LoadValues() {
                    var tl = $find("<%=tlHierarchy.ClientID %>");                 
                }

            </script>
</telerik:RadScriptBlock>

So basically .. how can i set a treelist's height from client side ?
Thank you.

[Princy]

Hi Bogdan,

One suggestion is that you can set height from clientside by adding a cssclass as follows.

CSS:

<style type="text/css">
   .class
    {
      height: 700px;
    }
</style>

JS:

<script type="text/javascript">
    Sys.Application.add_load(LoadValues);
    function LoadValues()
    {
        var treelist= $find("<%=tlHierarchy.ClientID%>");
        treelist.addCssClass("class");
    }
</script>

Thanks,
Princy.

[bogdan]

i need to dynamically set the height.
Although adding a css class might work , it would not really solve my problem.
But thank you for the hint.

[Princy]

Hi Bogdan,

Try the following JavaScript to set height of RadTreeList.

JS:

<script type="text/javascript">
    Sys.Application.add_load(LoadValues);
    function LoadValues()
     {
       var treelist= $find("<%=tlHierarchy.ClientID%>");
       treelist._element.style.height = "700px";
     }
</script>

Thanks,
Princy.

[bogdan]

Thank you. That is partially correct and helpful.
I still feel strongly that there should be a method at treelist level  that should allow you to set height.
I said it's only partial correct because we also have to set the scrollheight. I will insert the code here for further reference.
Thank you again , you were most helpful.

var tl = $find("<%=tlHierarchy.ClientID %>");
tl._element.style.height = document.documentElement.clientHeight - 150 + "px";

var scrollArea = $get("<%=tlHierarchy.ClientID %>" + '_rtlData');
var header = $get("<%=tlHierarchy.ClientID %>" + '_rtlHeader')
scrollArea.style.height = document.documentElement.clientHeight - header.clientHeight - 160 + "px";