RadPane not resizing correctly with resize() method

3 posts, 1 answers
  1. Hansik
    Hansik avatar
    23 posts
    Member since:
    Oct 2007

    Posted 04 May 2010 Link to this post

    Hi,

       I have a RadPane that I need to resize depending on the situation. I found this pane method resize which can be set to resize forward or backward which is exactly what I need. However, it seems that it only works for forward everytime and not with backward orientation.

       Here's the code I used for it:

       function setPaneHeight(toExpand)
       { 
                var pane = $find('<% pnlMainPanel.ClientID %>');
                var isResized = document.getElementById('isMainPaneResized').value; //set to 1 or 0 if pane is resized already or not yet respectively
                if (toExpand = "true")
                {
                        if (isResized=="0") // not yet expanded or resized
                        {
                             pane.resize(25,2); //expand forward by 25 pixels
                             document.getElementById('isMainPaneResized').value = "1";
                        }
                        else //already expanded
                        {
                            //just do nothing
                        }
                }
                else // to contract pane
                {
                        if (isResized == "0") //not yet expanded or resized
                        {
                            // just don't do anything
                        }
                        else
                        {
                                pane.resize (25,1); resize backwards by 25 pixels;
                                document.getElementById('isMainPaneResized').value = "0";
                        }
                }
            
       }

       With this code above, I send a value of 1 (to expand) or 0 (to contract) and issue a pane resize correspondingly. And then I set the hidden field 'isMainPaneResized' so that I would know when to set it back to its original size. Basically when it is already expanded and I hit expand request again to this function, I would just not do anything. But if it is not yet expanded, I would then expand it and set the hidden value to expanded (1). And when it is already expanded (hidden value is already set to 1) and I send a "to contract" request, I would then "contract" it otherwise, I would just not do anything.

       Please let me know if you have any further clarifications on this matter.

    Thanks,
    Arthur
  2. Answer
    Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 05 May 2010 Link to this post

    Hi Arthur,

    You should use the pane.resize(25) or pane.resize(-25) to add/remove 25px from the pane's size.
    Here is a simple example:
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head >
        <title></title>
          
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            function Resize(toExpand)
            {
                var pane = $find('<%= RadPane1.ClientID %>');
                if (toExpand == true)
                {
                    alert("Add 25px");
                    pane.resize(25); 
                }
                else
                {
                    alert("Remove 25px");
                    pane.resize(-25); 
                }
            }
        </script>
        <div>
            <input type="button" value="Add 25px" onclick="Resize(true)" />
            <input type="button" value="Remove 25px" onclick="Resize(false)" />
         <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal">
            <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
          </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

    Let us know if you have any other questions.

    Greetings,
    Petio Petkov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hansik
    Hansik avatar
    23 posts
    Member since:
    Oct 2007

    Posted 05 May 2010 Link to this post

    Thanks, Petio for your reply. Actually, that's what I found out too (just putting in a negative value to contract), but I still have the 2nd parameter like pane.resize(-25,1) because the documentation has it with the two parameters....apparently, with your code below, it seems that you might not need the 2nd one.

    Thanks a lot!!!!

Back to Top