Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > need to Dock the splitter and pane on Button Click

• jailal

  Posted on Feb 15, 2011 (permalink)

  In ASP.NET i have  one RadSplitter,RadPane and RadSlidingZone and RadSlidingPane.When I click on button I need to hide the pane or dock the pane ,but on server side Radslidingpane2.EnableDock = False is working fine and this will undock, but I need to enable the dock.i have read the form http://www.telerik.com/community/forums/aspnet-ajax/splitter/sliding-pane-not-appearing-after-docking-undocking-programatically.aspx  I read this forum   Sliding Pane not appearing after docking/undocking programatically but the script is not working properly  as the function below I have mentioned

  The pupose of this is that had one report and need to utilize space while clicking button

  <script type="text/javascript">

      function TogglePane(paneID)

      {

          var slidingZone = $find("<%=RadSlidingZone1.ClientID%>");

          var slidingPane = slidingZone.getPaneById(paneID);

          var isDocked = slidingPane.get_docked();

          var result;

          if (isDocked)

          {

              result = slidingZone.undockPane(paneID);

          } else

          {

              slidingZone.collapsePane(paneID,true);

              result = slidingZone.dockPane(paneID);

          }

      }

  </script>

• Dobromir Dobromir

  Posted on Feb 18, 2011 (permalink)

  Hi Jailal,
  
  I am not quite sure I understand the exact scenario.
  
  When RadSlidingPane's property EnableDocking is set to false the docking functionality of the pane is disabled. If you want to programatically dock / undock a sliding pane server-side you need to set the RadSlidingZone's DockedPaneId property to point to the Pane's ID (or to an empty string to undock the pane).
  

  void Button1_Click(object sender, EventArgs e)

  {

      if (RadSlidingZone1.DockedPaneId == String.Empty)

          RadSlidingZone1.DockedPaneId = RadSlidingPane1.ClientID;

      else

          RadSlidingZone1.DockedPaneId = String.Empty;

  }

  
  If this is not the case, could you please describe in more details what you are trying to achieve?
  
  Best wishes,
  Dobromir
  the Telerik team

  Vote for Telerik products at the Great Indian Developer Awards

• jailal

  Posted on Feb 22, 2011 (permalink)

    <telerik:RadSplitter ID="Radsplitter1" runat="server"  Orientation="Horizontal" Width="100%"

                      Height="100%" BackColor="#c6eaff" ResizeMode="AdjacentPane" LiveResize="True"

                      FullScreenMode="True">

                      <telerik:RadPane ID="Radpane1" runat="server" Height="20px" Scrolling="None" MinWidth="20">

                          <telerik:RadSlidingZone ID="Radslidingzone1" Height="20px"  runat="server" DockedPaneId="Radslidingpane2">

                              <telerik:RadSlidingPane ID="Radslidingpane2" Title="Set Report Parameters" runat="server"

                                  Height="100px" Scrolling="None" MinWidth="40">

                                  <asp:UpdatePanel runat="server" ID="UpdatePanel1">

                                      <ContentTemplate>

                                          <table width="100%">

                                              <tr>

                                                  <td width="98%">

                                                      <table width="100%" cellpadding="0" cellspacing="5">

                                                          <tr>

                                                              <td class="view2_fonts">

                                                                  Language:

                                                              </td>

                                                              <td class="view_fonts">

                                                                  <asp:DropDownList ID="ddlLanguage" Width="90" runat="server">

                                                                      <asp:ListItem Text="Select" Value="0" Selected="True"></asp:ListItem>

                                                                  </asp:DropDownList>

                                                              </td>

  <td class="view2_fonts">

                                                                  Client:

                                                              </td>

                                                              <td class="view_fonts">

                                                                  <asp:DropDownList ID="ddlClient" Width="240" runat="server" AutoPostBack="True">

                                                                      <asp:ListItem Text="Select" Value="0" Selected="True"></asp:ListItem>

                                                                  </asp:DropDownList>

                                                              </td>

                                                              <td class="view2_fonts">

                                                                  Project:

                                                              </td>

  <asp:Button ID="btnView"   runat="server" Width="100" ValidationGroup="1" Text="View Report" />

    </ContentTemplate>

                                  </asp:UpdatePanel>

                              </telerik:RadSlidingPane>

  </telerik:RadSlidingZone>

                      </telerik:RadPane>

                      <telerik:RadSplitBar ID="Radsplitbar1" runat="server" Width="100%"></telerik:RadSplitBar>

                      <telerik:RadPane ID="Radpane2" runat="server" Width="100%" Scrolling="None">

                          <table width="100%" style="height: 100%;">

                              <tr style="height: 100%;" valign="top">

                                  <td>

                                      <rsweb:ReportViewer ID="rptARC0028aViewer" Font-Names="Verdana" Width="100%" Height="100%"

                                          ShowParameterPrompts="false" ProcessingMode="Remote" PromptAreaCollapsed="True"

                                          ShowBackButton="true" ShowExportControls="true" ShowPageNavigationControls="true"

                                          ShowCredentialPrompts="false" ShowFindControls="true" ShowRefreshButton="true"

                                          ShowPrintButton="true" ShowZoomControl="true" runat="server">

                                      </rsweb:ReportViewer>

                                  </td>

                              </tr>

                          </table>

                      </telerik:RadPane>

                  </telerik:RadSplitter>

   

  This is the exact design and thanks for the first reply which was exactly correct and need more .when I click on button I need to display only report parameters and my report other things I need to hide  and on mouse over I need to display the controls which was done.The code which send u is hiding ,but on second click it was not not hiding and also I have one splitter for report and need to hide,if u look up design u can understand more.if need more clarification I ll explain

• Dobromir Dobromir

  Posted on Feb 24, 2011 (permalink)

  Hello Jailal,
  
  The sample code that I have provided is toggling the DockedPane, thus if you have not docked the pane before the second time you click on the button it will actually dock the pane. You can set RadSlidingPane's property DockOnOpen to true to configure the sliding pane to be docked upon opening.
  
  Also, I noticed that there is an update panel wrapping the content of the sliding pane. With the current configuration, the button will update only the content of the sliding pane and not the whole splitter, and the changes to the sliding pane's state will not be applied correctly.
  
  If you do not execute any other server-side functionality when the button is clicked I would recommend you using the RadSplitter's client-side API to undock the pane. If you do execute additional server-side functionality you need to either remove the update panel or wrap the whole RadSplitter with it.
  
  For your convenience I have prepared a sample page using the provided layout and added additional button that undock the pane using the JavaScript function from the first post.
  
  Kind regards,
  Dobromir
  the Telerik team

  Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

  Attached files

  • Default.zip

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > need to Dock the splitter and pane on Button Click