Hi,
Question: How do you prevent a dock zone in horizontal orientation from wrapping the dock zones?
Reason: I need to keep all windows in 1 row and have a scroll bar allow the user to see the windows that go off the page. This needs to maintain only 1 row of windows even when users resize their browser.
Why:
I am building a dashboard that allows users to add as many dock windows to a single horizontal dock zone as they wish. We offer a setting in the interface that lets the user show N windows in the current screen. We set the window width based on the the current resolution divided by the number of windows the user wants to view in the screen. All other windows (if any) go off the page to the right and user can view them with the horizontal scroll bar.
Ex) If the user has 5 windows and they choose to view 3 windows in the screen and our screen width is 1000px... We would make the window width = 1000 / 3 (roughly). The other 2 windows would be off the page and the scroll bar is needed to view them.
Thank you in advance for your help!
Ryan
Question: How do you prevent a dock zone in horizontal orientation from wrapping the dock zones?
Reason: I need to keep all windows in 1 row and have a scroll bar allow the user to see the windows that go off the page. This needs to maintain only 1 row of windows even when users resize their browser.
Why:
I am building a dashboard that allows users to add as many dock windows to a single horizontal dock zone as they wish. We offer a setting in the interface that lets the user show N windows in the current screen. We set the window width based on the the current resolution divided by the number of windows the user wants to view in the screen. All other windows (if any) go off the page to the right and user can view them with the horizontal scroll bar.
Ex) If the user has 5 windows and they choose to view 3 windows in the screen and our screen width is 1000px... We would make the window width = 1000 / 3 (roughly). The other 2 windows would be off the page and the scroll bar is needed to view them.
Thank you in advance for your help!
Ryan
1 Answer, 1 is accepted
0
Hi Ryan,
I believe the best approach to achieve the desired behavior, is by setting a large value for the zone's Width, and then placing it inside a <div/> element whose width and overflow will be set dynamically based on the chosen settings by the user. Here is a simple demonstration:
Greetings,
Pero
the Telerik team
I believe the best approach to achieve the desired behavior, is by setting a large value for the zone's Width, and then placing it inside a <div/> element whose width and overflow will be set dynamically based on the chosen settings by the user. Here is a simple demonstration:
<%@ 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"> #zone1 { width: 605px; overflow: auto; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="ScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <div id="zone1"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="100px" Width="2300px" Orientation="Horizontal"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock3" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock4" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock5" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock6" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </div> </telerik:RadDockLayout> </form></body></html>Greetings,
Pero
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>