Stuart Hemming
Top achievements
Rank 2
Rank 2
Stuart Hemming
asked on 22 Apr 2010, 08:44 PM
I want to create a page with a toolbar on it and a 'single' pane of content (that is, no obvious splitterbar) but with a sliding panel that appears when a toolbar button is clicked.
I can get the majority of it working, but I can't seem to hide the slidingpane's tab when it's collapsed so there's always a margin on 'unused' space.
Can this actually be done?
--
Stuart
I can get the majority of it working, but I can't seem to hide the slidingpane's tab when it's collapsed so there's always a margin on 'unused' space.
Can this actually be done?
--
Stuart
2 Answers, 1 is accepted
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 25 Apr 2010, 01:11 PM
I've solved most of this problem, if anyone is interested ...
There is still one outstanding issue and that is, if I let the sliding pane dock then once I've undocked and collapsed the sliding pane the toolbar button won't show the sliding pane a 2nd time.
Still, on we go ...
--
Stuart
| <%@ 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") |
| { |
| var szp = $find("<%= RadPane1.ClientID %>"); |
| szp.expand(); |
| var sz = $find("<%= RadSlidingZone1.ClientID %>"); |
| sz.ExpandPane("RadSlidingPane1"); |
| //sz.DocPane("RadSlidingPane1"); |
| } |
| } |
| function SliderCollapsed(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" EnableDock="false" OnClientCollapsed="SliderCollapsed" 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/find_16x16.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> |
There is still one outstanding issue and that is, if I let the sliding pane dock then once I've undocked and collapsed the sliding pane the toolbar button won't show the sliding pane a 2nd time.
Still, on we go ...
--
Stuart
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 25 Apr 2010, 07:59 PM
OK, sorted.
I've not tried this on the Q1 2009 version we're using at work, but on my local dev machine I have Q1 2010 installed and the following code works.
| <%@ 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") { |
| ExpandSlider(); |
| var sz = $find("<%= RadSlidingZone1.ClientID %>"); |
| sz.ExpandPane("RadSlidingPane1"); |
| //sz.DocPane("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> |
Here's hoping that someone else finds this helpful.
--
Stuart