barry babister
Top achievements
Rank 1
barry babister
asked on 27 Oct 2008, 11:06 AM
Is there a way that you can show content after the dock has been Collapsed ?
3 Answers, 1 is accepted
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 27 Oct 2008, 03:43 PM
Try to expand it.
Collapse comand is toggle command and it contains two commands- collapse and expand.
Try pressing the collapse command two times here:
http://demos.telerik.com/ASPNET/Prometheus/Dock/Examples/AutoPostBack/DefaultCS.aspx
Collapse comand is toggle command and it contains two commands- collapse and expand.
Try pressing the collapse command two times here:
http://demos.telerik.com/ASPNET/Prometheus/Dock/Examples/AutoPostBack/DefaultCS.aspx
0
barry babister
Top achievements
Rank 1
answered on 27 Oct 2008, 04:26 PM
No , i want to collapase the docker , but i want to display a smaller version of the content that is in the docker
So when they are expanded they show all the content and when they are collapsed they show a smaller version of the content
So when they are expanded they show all the content and when they are collapsed they show a smaller version of the content
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 28 Oct 2008, 10:07 AM
The code below illustrates your goal
| <%@ 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>Untitled Page</title> |
| <script type="text/javascript"> |
| function ToggleDock(dock,args) |
| { |
| var smallDiv = $get("RadDock1_Small"); |
| var bigDiv = $get("RadDock1_Big"); |
| if(smallDiv.style.display == "none") |
| { |
| smallDiv.style.display = ""; |
| bigDiv.style.display="none"; |
| } |
| else |
| { |
| smallDiv.style.display = "none"; |
| bigDiv.style.display=""; |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager id="ScriptManager1" runat="server"/> |
| <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> |
| <telerik:RadDock ID="RadDock1" runat="server"> |
| <Commands> |
| <telerik:DockCommand Name="custom" OnClientCommand="ToggleDock" /> |
| </Commands> |
| <ContentTemplate> |
| <div id="RadDock1_Small" style="display:none"> |
| small text |
| </div> |
| <div id="RadDock1_Big"> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| BIG TEXT<br /> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockLayout> |
| </form> |
| </body> |
| </html> |
I added two divs in the RadDock(one is with display:none).When a custom command is clicked the smallDiv is showed and apply display:none to the bigDiv.
A simple example with custom commands is available here:
http://demos.telerik.com/ASPNET/Prometheus/Dock/Examples/Commands/DefaultCS.aspx