RadSpliter and RadWindowManager

2 posts, 0 answers
  1. Vino
    Vino avatar
    15 posts
    Member since:
    Jun 2009

    Posted 27 May 2010 Link to this post

    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> 
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 01 Jun 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top