Change pane height using javascript

3 posts, 0 answers
  1. Luca B
    Luca B avatar
    38 posts
    Member since:
    Oct 2012

    Posted 24 Jan 2012 Link to this post

    Hi there, I am using a fullscreen splitter with three panes, without splitbars. If I resize the browser window the splitter resizes just fine.
    Now I need to change the height of the top pane according to the user clicking on a button, using javascript.
    I use splitter.getStartPane().set_height to set the height, and it works, BUT then the splitter doesn't fill the screen anymore. So, if I change the height from 100 to 50 pixels, an empty 50 pixels tall area appears below the end pane.
    I tried using splitter.repaint() and splitter.set_height($(window).height()) without success.
    I also tried $(window).trigger("resize") just because resizing the window soon after setting the height does the trick, but it doesn't work via code.
    Any idea?
  2. Luca B
    Luca B avatar
    38 posts
    Member since:
    Oct 2012

    Posted 25 Jan 2012 Link to this post

    Looks like I managed to get it to work but I'd like a proper solution, if any.
    Basically I call splitter.set_height TWICE, passing the real height on the second call, and height -1 on the first.
    Any explanation?
  3. Dobromir
    Dobromir avatar
    1633 posts

    Posted 26 Jan 2012 Link to this post

    Hi Luca,

    The set_width() / set_height() methods of the RadPane can be used to force a size to that pane without triggering the resize event, which prevents the splitter to size adjacent panes leading to overall resize of the splitter to cover for the added (removed) width / height.

    In order to programmatically resize a pane you need to use its resize() client-side method, e.g.:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal" ResizeMode=AdjacentPane>
        <telerik:RadPane ID="RadPane1" runat="server">
            <asp:Button Text="Set Height of first pane to 200px" runat="server" OnClientClick="resizePane(0, 200);return false;" />
            <asp:Button Text="Set Height of first pane to 300px" runat="server" OnClientClick="resizePane(0, 300);return false;" />
            <asp:Button Text="Set Height of first pane to 400px" runat="server" OnClientClick="resizePane(0, 400);return false;" />
        <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
        <telerik:RadPane ID="RadPane3" runat="server"></telerik:RadPane>
    <script type="text/javascript">
        function resizePane(paneIndex, newHeight)
            var splitter = $find("<%=RadSplitter1.ClientID %>");
            var pane = splitter.getPaneByIndex(paneIndex);
            var heightDelta = newHeight - pane.get_height();//calculate the delta
            pane.resize(heightDelta, 1);

    Kind regards,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top