TreeList overall height resize from client side.

5 posts, 1 answers
  1. bogdan
    bogdan avatar
    9 posts
    Member since:
    Mar 2009

    Posted 25 May 2012 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. bogdan
    bogdan avatar
    9 posts
    Member since:
    Mar 2009

    Posted 28 May 2012 Link to this post

    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.
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 May 2012 Link to this post

    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.
  6. bogdan
    bogdan avatar
    9 posts
    Member since:
    Mar 2009

    Posted 28 May 2012 Link to this post

    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";

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017