This is a migrated thread and some comments may be shown as answers.

Change pane height using javascript

2 Answers 203 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Luca B
Top achievements
Rank 1
Luca B asked on 24 Jan 2012, 02:29 PM
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?
Thanks

2 Answers, 1 is accepted

Sort by
0
Luca B
Top achievements
Rank 1
answered on 25 Jan 2012, 06:31 PM
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?
Thanks!
0
Dobromir
Telerik team
answered on 26 Jan 2012, 12:28 PM
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>
    <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
    <telerik:RadPane ID="RadPane3" runat="server"></telerik:RadPane>
</telerik:RadSplitter>
 
<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);
    }
</script>


Kind regards,
Dobromir
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
Tags
Splitter
Asked by
Luca B
Top achievements
Rank 1
Answers by
Luca B
Top achievements
Rank 1
Dobromir
Telerik team
Share this question
or