Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > Change pane height using javascript

• Luca B

  Posted on Jan 24, 2012 (permalink)

  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

  Reply

• Luca B

  Posted on Jan 25, 2012 (permalink)

  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!

  Reply


• Dobromir Dobromir

  Posted on Jan 26, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > Change pane height using javascript