Hi ,
Below is the sample code , when i click on RadSplitBar , the left Pane is collasped but the RadWindow in right pane remains at same size . I tried using RestrictionZoneID by giving right panes ID and tried using a div control , unable to fix or dock to the right pane size , Kindly help me out in fixing .
Is it possible to give dynamically ?.
Kindly help me out in fixing this issues please
Thanks
Vinodh
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title></title> |
| <style type="text/css"> |
| .rtsImg |
| { |
| margin: 2px 4px 0 0 !important; |
| } |
| .restrictionZone |
| { |
| width: 100%; |
| height:100%; |
| } |
| .taskbar |
| { |
| display: block; |
| float: left; |
| } |
| div.RadTabStrip .rtsLevel { |
| width: auto; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| <AjaxSettings> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" |
| Skin="Default"> |
| </telerik:RadAjaxLoadingPanel> |
| <table width="100%" style="height: 100%"> |
| <tr> |
| <td> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| </tr> |
| <tr> |
| <td colspan="5" style="height: 100%"> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width ="100%" Orientation="Vertical"> |
| <telerik:RadPane ID="radRightPane" runat="server" Width="22%" Height="100%"> |
| <telerik:RadPanelBar ID="RadPanelBar1" runat="server" BorderStyle="None" |
| ExpandMode="FullExpandedItem" Height="100%" |
| OnClientItemClicking="openNewWindow"><Items><telerik:RadPanelItem |
| Expanded="True" Text="Mail"><Items><telerik:RadPanelItem |
| ImageUrl="Img/mailPersonalFolders.gif" Text="Personal Folders" |
| Value="http://www.google.com" /><telerik:RadPanelItem |
| ImageUrl="Img/mailDeletedItems.gif" Text="Deleted Items" |
| Value="http://www.google.com" /><telerik:RadPanelItem |
| ImageUrl="Img/mailInbox.gif" Text="Inbox" Value="http://www.google.com" /><telerik:RadPanelItem |
| ImageUrl="Img/mailFolder.gif" Text="My Mail" Value="http://www.google.com" /><telerik:RadPanelItem |
| ImageUrl="Img/mailSent.gif" Text="Sent Items" Value="http://www.google.com" /><telerik:RadPanelItem |
| ImageUrl="Img/mailOutbox.gif" Text="Outbox" Value="http://www.google.com" /><telerik:RadPanelItem |
| ImageUrl="Img/mailSearch.gif" Text="Search Folders" |
| Value="http://www.google.com" /> |
| </Items> |
| </telerik:RadPanelItem><telerik:RadPanelItem Text="Calendar"><Items><telerik:RadPanelItem><ItemTemplate><telerik:RadCalendar |
| ID="Calendar1" runat="server" Style="margin: 6px auto 0" /> |
| </ItemTemplate> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem><telerik:RadPanelItem Text="Contacts"><Items><telerik:RadPanelItem |
| ImageUrl="Img/contactsItems.gif" Text="My Contacts" /><telerik:RadPanelItem |
| ImageUrl="Img/contactsItems.gif" Text="Address Cards" /><telerik:RadPanelItem |
| ImageUrl="Img/contactsItems.gif" Text="Phone List" /><telerik:RadPanelItem |
| ImageUrl="Img/contactsItems.gif" Text="Shared Contacts" /> |
| </Items> |
| </telerik:RadPanelItem><telerik:RadPanelItem Text="Tasks"><Items><telerik:RadPanelItem |
| ImageUrl="Img/tasksItems.gif" Text="My Tasks" /><telerik:RadPanelItem |
| ImageUrl="Img/tasksItems.gif" Text="Shared Tasks" /><telerik:RadPanelItem |
| ImageUrl="Img/tasksItems.gif" Text="Active Tasks" /><telerik:RadPanelItem |
| ImageUrl="Img/tasksItems.gif" Text="Completed Tasks" /> |
| </Items> |
| </telerik:RadPanelItem><telerik:RadPanelItem Text="Notes"><Items><telerik:RadPanelItem |
| ImageUrl="Img/notesItems.gif" Text="My Notes" /><telerik:RadPanelItem |
| ImageUrl="Img/notesItems.gif" Text="Notes List" /><telerik:RadPanelItem |
| ImageUrl="Img/notesItems.gif" Text="Shared Notes" /><telerik:RadPanelItem |
| ImageUrl="Img/notesItems.gif" Text="Archive" /> |
| </Items> |
| </telerik:RadPanelItem><telerik:RadPanelItem Text="Folders List"><Items><telerik:RadPanelItem |
| ImageUrl="Img/mailOutbox.gif" Text="My Client.Net" /><telerik:RadPanelItem |
| ImageUrl="Img/mailOutbox.gif" Text="My Profile" /><telerik:RadPanelItem |
| ImageUrl="Img/mailOutbox.gif" Text="My Support Tickets" /><telerik:RadPanelItem |
| ImageUrl="Img/mailOutbox.gif" Text="My Licenses" /> |
| </Items> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelBar> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" > |
| </telerik:RadSplitBar> |
| <telerik:RadPane ID="radLeftPane" runat="server" Width="78%"> |
| <telerik:RadTabStrip ID="RadTabStrip1" runat="server" |
| OnClientTabSelected="OnClientTabSelected" Orientation="HorizontalBottom" |
| ScrollButtonsPosition="Middle" ScrollChildren="True" SelectedIndex="0" |
| Skin="Web20" Width="100%"><tabs><telerik:RadTab Selected="True" |
| Style="display: none;" /></tabs></telerik:RadTabStrip> |
| <telerik:RadWindowManager ID="RadWindowManager" runat="server" |
| Behaviors="Close,Maximize,Minimize,Move,Reload,Resize" |
| KeepInScreenBounds="True" OnClientActivate="OnClientActivate" |
| OnClientClose="OnClientClose" OnClientCommand="OnClientCommand" |
| RestrictionZoneID="radLeftPane" ShowOnTopWhenMaximized="true" Skin="Web20"> |
| </telerik:RadWindowManager> |
| <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> |
| <script type="text/javascript"> |
| // <![CDATA[ |
| var manager = null; |
| var tabStrip = null; |
| function pageLoad() { |
| //get a reference to the needed controls - |
| manager = $find("<%=RadWindowManager.ClientID %>"); |
| manager = radopen("http://www.google.com", null); |
| tabStrip = $find("<%=RadTabStrip1.ClientID %>"); |
| } |
| //opening the window |
| function openNewWindow(sender, args) { |
| var item = args.get_item(); |
| var itemUrl = item.get_value(); |
| var itemText = item.get_text(); |
| if (itemUrl) { |
| var windowURL = itemUrl; |
| var oWnd = radopen(itemUrl, null); |
| oWnd.set_title(itemText); |
| oWnd.center(); |
| tabStrip.trackChanges(); |
| //create a new tab |
| var tab = new Telerik.Web.UI.RadTab(); |
| //set the text of the tab |
| tab.set_text(itemText); |
| oWnd.correspondingTab = tab; |
| //add the tab to the tabstrip |
| tabStrip.get_tabs().add(tab); |
| tabStrip.repaint(); |
| tab.correspondingWnd = oWnd; |
| tab.set_imageUrl(item.get_imageUrl()); |
| tabStrip.commitChanges(); |
| //Select this tab |
| tab.select(); |
| } |
| } |
| function OnClientCommand(sender, args) { |
| //because we don't want to show the minimized RadWindow, we hide it after minimizing |
| //and raise the _Maximized flag (used in OnClientTabSelected) |
| if (args.get_commandName() == "Minimize") { |
| if (sender.isMaximized()) { |
| sender._Maximized = true; |
| } |
| sender.hide(); |
| //raise the _toMinimize flag (used in OnClientActivate) |
| sender._toMinimize = true; |
| var tab = sender.correspondingTab; |
| if (tab) { |
| tab.set_selected(false); |
| } |
| } |
| } |
| function OnClientTabSelected(sender, args) { |
| //get a reference to the corresponding window |
| var win = args.get_tab().correspondingWnd; |
| if (!win) return; |
| if (!win.isVisible()) { |
| win.show(); |
| win.restore(); |
| //if the window was maximized before client minimizes it, we need to restore |
| //its maximized state |
| if (win._Maximized) { |
| win.maximize(); |
| win._Maximized = null; |
| } |
| } |
| //ensure that the currently active RadWindow will have the highest z-Index. |
| var popupElem = win.get_popupElement(); |
| var oldZindex = parseInt(popupElem.style.zIndex); |
| var styleZIndex = win.get_stylezindex(); |
| var newZIndex = (styleZIndex) ? styleZIndex : Telerik.Web.UI.RadWindowUtils.get_newZindex(oldZindex); |
| popupElem.style.zIndex = "" + newZIndex; |
| win.setActive(true); |
| } |
| function OnClientActivate(sender, args) { |
| var tab = sender.correspondingTab; |
| if (tab && !sender._toMinimize) { |
| tab.set_selected(true); |
| } |
| sender._toMinimize = false; |
| } |
| function OnClientClose(oWnd) { |
| //remove the corresponding tab from the tabstrip |
| var tab = oWnd.correspondingTab; |
| if (tab) { |
| tabStrip.trackChanges(); |
| tabStrip.get_tabs().remove(tab); |
| tabStrip.commitChanges(); |
| } |
| } |
| // ]]> |
| </script> |
| </telerik:RadCodeBlock> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| <td> |
| </td> |
| </tr> |
| </table> |
| </form> |
| </body> |
| </html> |
1 Answer, 1 is accepted
0
Hi Vino,
I am not quite sure I understand the question.
In order to change the size of the RadWindow when the left pane is collapsed / expanded I suggest you to attach an event handler to the OnClientCollapsed / OnClientExpanded client-side events to modify the window. The following example will recalculate the size of a maximized window when the RadSplitter's left pane is collapsed / expanded:
}
If this is not the issue, could you please describe in more detail what is the exact problem.
Kind regards,
Dobromir
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
I am not quite sure I understand the question.
In order to change the size of the RadWindow when the left pane is collapsed / expanded I suggest you to attach an event handler to the OnClientCollapsed / OnClientExpanded client-side events to modify the window. The following example will recalculate the size of a maximized window when the RadSplitter's left pane is collapsed / expanded:
<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width ="100%" Orientation="Vertical"> <telerik:RadPane ID="radRightPane" runat="server" Width="22%" Height="100%" OnClientCollapsed="windowResize" OnClientExpanded="windowResize"> //................ </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" > </telerik:RadSplitBar> <telerik:RadPane ID="radLeftPane" runat="server" Width="78%"> //............ <telerik:RadWindowManager ID="RadWindowManager" runat="server" Behaviors="Close,Maximize,Minimize,Move,Reload,Resize" KeepInScreenBounds="True" OnClientActivate="OnClientActivate" OnClientClose="OnClientClose" OnClientCommand="OnClientCommand" RestrictionZoneID="radLeftPane" ShowOnTopWhenMaximized="true" Skin="Web20"> </telerik:RadWindowManager> </telerik:RadPane></telerik:RadSplitter>
<script type="text/javascript">
function windowResize(sender, args)
{ var wndManager = $find("<%=RadWindowManager.ClientID %>");//get reference to the WindowManager var windows = wndManager.get_windows();//get windows for (var i = 0; i < windows.length; i++) { var oWnd = windows[i]; if (oWnd.isMaximized()) oWnd.maximize();//if a window is maximized call maximize() explicitly to recalculate its size }</script>If this is not the issue, could you please describe in more detail what is the exact problem.
Kind regards,
Dobromir
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.