Using RadSlidingPane to maximize your screen real estate

1 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Apr 2010 Link to this post

    Requirements

    RadControls version

    Written using Q1 2010, but suggest it could be used using older versions
    .NET version

    Tested in 3.5 but uses nothing specific to this version
    Visual Studio version

    2008
    programming language

    C#
    browser support

    all browsers supported by RadControls

    These days, we as developers need to get as much functionality as we can in to an application but don't have the freedom WinForms developers have in using screen real estate.

    Whilst working in VS I realised I relied on the sliding panes in the IDE quite a lot and thought that this might be a good way of making sets of controls available when required. I plied with the idea on a contact listing control I had. I had a requirement to add an advanced search control set to the control. I could have just used a new .aspx page in a popup RadWindow but TBH there's a bit of resistance to using too many popups so I thought of using a sliding pane. This proved quite easy, but it meant giving up some real estate for the tabs when the search controls weren't needed. So I set about finding a way of using the sliding pane without a tab and invoking it using a button on RadToolBar which my contacts control already had.

    The upshot is the following code. which should, at least, be fairly self-explanatory, but if you have any questions, don't hesitate to ask.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
      <head runat="server"
        <title></title
        <style type="text/css"
          html, body, form {width:100%; height:100%; overflow:hidden; } 
        </style> 
      </head> 
      <body> 
        <form id="form1" runat="server"
          <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
          </telerik:RadScriptManager> 
          <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
            <script type="text/javascript">         
              function ButtonClick(sender, e) 
              { 
                var btn = e.get_item(); 
                if (btn.get_commandName() == "search") 
                { 
                  OpenSearchPane(); 
                } 
              } 
              function OpenSearchPane() 
              { 
                ExpandSlider(); 
                var sz = $find("<%= RadSlidingZone1.ClientID %>"); 
                sz.ExpandPane("RadSlidingPane1"); 
              } 
              function ExpandSlider() 
              { 
                var szp = $find("<%= RadPane1.ClientID %>"); 
                szp.expand(); 
              } 
              function CollapseSlider(sender, e) 
              { 
                var szp = $find("<%= RadPane1.ClientID %>"); 
                szp.collapse(); 
              } 
              function CloseSearchPane() 
              { 
                var sz = $find("<%= RadSlidingZone1.ClientID %>"); 
                sz.CollapsePane("RadSlidingPane1"); 
              } 
            </script> 
          </telerik:RadScriptBlock> 
           
          <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Office2007" Width="100%" Height="100%"
            <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="1px" Collapsed="true"
              <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="1px"
                <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="200px" DockOnOpen="false" OnClientBeforeDock="ExpandSlider" OnClientUndocked="CollapseSlider" OnClientCollapsed="CollapseSlider" Title="Advanced Search"
                  <p>Lorem ipsum dolor sit amet consectetuer Curabitur dictum In sed lorem. Turpis faucibus convallis ac lacus felis Nullam id justo vel Morbi. Et non turpis vel sapien id dui urna quis molestie Vestibulum. Lorem nec tortor nibh Vivamus pellentesque euismod quis ut a Nam. Nec sit ipsum elit mus lacinia tellus Sed Maecenas vel ultrices. Augue nec enim Suspendisse adipiscing fames amet felis Nam.</p> 
                  <p>Turpis suscipit auctor lobortis felis non In ligula eget interdum nibh. Volutpat sollicitudin condimentum at venenatis ac mollis ridiculus tellus nec mattis. Quis nulla Curabitur pretium mauris vitae ut leo elit Nam elit. Vestibulum montes et neque In Curabitur ullamcorper tincidunt tempus ligula turpis. Nunc vitae wisi vel lacinia risus enim volutpat ultrices Curabitur volutpat. Vestibulum condimentum laoreet rhoncus convallis In turpis urna nibh ante enim. Felis metus neque.</p> 
                  <p>Vivamus senectus metus volutpat nunc dui tellus id odio In a. Tellus Curabitur massa lacus Donec adipiscing Nam consectetuer nonummy libero Nam. Malesuada id parturient feugiat tellus Vestibulum mauris sed Vivamus accumsan consectetuer. Aenean scelerisque ac dui justo Nunc et id vitae et consequat. Condimentum fames laoreet volutpat neque id nulla vitae morbi.</p> 
                  <p>Dolor malesuada mus turpis Curabitur pede sit lacus Aenean eget non. Nibh Ut arcu ligula pede consectetuer Suspendisse sapien nibh urna Nam. Id auctor laoreet Sed nunc consectetuer ut nonummy quis condimentum dui. Donec leo Vestibulum gravida Praesent justo penatibus eu elit vel turpis. Lacinia et cursus semper nibh dictumst pede tempor Aenean Vivamus In. Nunc ut nunc Nunc Morbi eu semper morbi risus Nam.</p> 
                  <asp:Button runat="server" ID="btnDoSearch" Text="Search" OnClientClick="CloseSearchPane();" /> 
                  <br /> 
                </telerik:RadSlidingPane> 
              </telerik:RadSlidingZone> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
            <telerik:RadPane ID="RadPane2" runat="server"
              <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2007" style="width:100%" OnClientButtonClicked="ButtonClick" > 
                <Items> 
                  <telerik:RadToolBarButton CommandName="search" ImageUrl="Images/zoom-in16.png" /> 
                </Items> 
              </telerik:RadToolBar> 
              <p>Lorem ipsum dolor sit amet consectetuer Curabitur dictum In sed lorem. Turpis faucibus convallis ac lacus felis Nullam id justo vel Morbi. Et non turpis vel sapien id dui urna quis molestie Vestibulum. Lorem nec tortor nibh Vivamus pellentesque euismod quis ut a Nam. Nec sit ipsum elit mus lacinia tellus Sed Maecenas vel ultrices. Augue nec enim Suspendisse adipiscing fames amet felis Nam.</p> 
              <p>Turpis suscipit auctor lobortis felis non In ligula eget interdum nibh. Volutpat sollicitudin condimentum at venenatis ac mollis ridiculus tellus nec mattis. Quis nulla Curabitur pretium mauris vitae ut leo elit Nam elit. Vestibulum montes et neque In Curabitur ullamcorper tincidunt tempus ligula turpis. Nunc vitae wisi vel lacinia risus enim volutpat ultrices Curabitur volutpat. Vestibulum condimentum laoreet rhoncus convallis In turpis urna nibh ante enim. Felis metus neque.</p> 
              <p>Vivamus senectus metus volutpat nunc dui tellus id odio In a. Tellus Curabitur massa lacus Donec adipiscing Nam consectetuer nonummy libero Nam. Malesuada id parturient feugiat tellus Vestibulum mauris sed Vivamus accumsan consectetuer. Aenean scelerisque ac dui justo Nunc et id vitae et consequat. Condimentum fames laoreet volutpat neque id nulla vitae morbi.</p> 
              <p>Dolor malesuada mus turpis Curabitur pede sit lacus Aenean eget non. Nibh Ut arcu ligula pede consectetuer Suspendisse sapien nibh urna Nam. Id auctor laoreet Sed nunc consectetuer ut nonummy quis condimentum dui. Donec leo Vestibulum gravida Praesent justo penatibus eu elit vel turpis. Lacinia et cursus semper nibh dictumst pede tempor Aenean Vivamus In. Nunc ut nunc Nunc Morbi eu semper morbi risus Nam.</p> 
            </telerik:RadPane> 
          </telerik:RadSplitter> 
        </form> 
      </body> 
    </html> 

    --
    Stuart

Back to Top