This is a migrated thread and some comments may be shown as answers.

RadSpliter and RadWindowManager

1 Answer 63 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Vino
Top achievements
Rank 1
Vino asked on 27 May 2010, 02:46 PM
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> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
            <td> 
                &nbsp;</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> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
            <td> 
                &nbsp;</td> 
        </tr> 
    </table> 
    </form> 
</body> 
</html> 

1 Answer, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 01 Jun 2010, 12:31 PM
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:
<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.
Tags
Splitter
Asked by
Vino
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Share this question
or