Sliding Panelbar in Master page

3 posts, 0 answers
  1. Catriona Potter
    Catriona Potter avatar
    3 posts
    Member since:
    Nov 2006

    Posted 23 Apr 2009 Link to this post

    Hi,
    I want a sliding panelbar on my master page. How do I do this?

    I've looked at your threads on this issue particularly "MasterPage Affect?" posted last year. I can can get the sliding affect in the content pages but I want the sliding affect on the panel which resides on the master page. I'm not a great javascript expert so I'm having problems migrating the example 
    http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx

    I'd be grateful for assistance.
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Apr 2009 Link to this post

    Hi Catriona,

    The code in our Sliding PanelBar example is optimized for any scenarios and could be used directly in a masterpage.

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 
     
    <%@ 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">  
            .leftPanelBarContainer  
            {  
                float: left;  
                width: 250px;  
                height: 250px;  
                overflow: auto;  
                position: relative; /* Required to workaround IE rendering bug*/  
            }  
            .rightPanelBarContainer  
            {  
                float: right;  
                width: 250px;  
                height: 250px;  
                overflow: auto;  
                overflow: hidden; /* Required to workaround IE rendering bug*/  
                position: relative;  
            }  
        </style> 
        <asp:ContentPlaceHolder ID="head" runat="server">  
        </asp:ContentPlaceHolder> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="ScriptManager" runat="server" /> 
        <asp:ImageButton runat="server" ID="tbimage" ImageUrl="~/1.jpg" Style="float: left;  
            outline: 0; width: 21px" /> 
        <div class="leftPanelBarContainer">  
            <div id="slidingDiv" style="visibility: hidden">  
                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Height="250px" ExpandMode="FullExpandedItem">  
                    <Items> 
                        <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">  
                            <Items> 
                                <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/ComboboxPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadMenu" ImageUrl="img/MenuPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/TabstripPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadPanelBar" ImageUrl="img/PanelBarPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadTreeView" ImageUrl="img/TreeviewPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadToolBar" ImageUrl="img/ToolbarPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadChart" ImageUrl="img/ChartPr.gif">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="WinForms controls">  
                            <Items> 
                                <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/Combobox_Win.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadDock" ImageUrl="img/Dock_Win.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadGridView" ImageUrl="img/RadGrid.bmp">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/Tabstrip_Win.gif">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="Other projects">  
                            <Items> 
                                <telerik:RadPanelItem Text="SiteFinity" ImageUrl="img/st.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="Reporting" ImageUrl="img/report.gif">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelBar> 
            </div> 
        </div> 
        <asp:ImageButton runat="server" ID="tbimageRight" ImageUrl="~/1.jpg" Style="float: right;  
            outline: 0;" /> 
        <div class="rightPanelBarContainer">  
            <div id="slidingDiv2" style="visibility: hidden">  
                <telerik:RadPanelBar runat="server" ID="RadPanelBar2" Height="250px" ExpandMode="FullExpandedItem">  
                    <Items> 
                        <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">  
                            <Items> 
                                <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/ComboboxPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadMenu" ImageUrl="img/MenuPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/TabstripPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadPanelBar" ImageUrl="img/PanelBarPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadTreeView" ImageUrl="img/TreeviewPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadToolBar" ImageUrl="img/ToolbarPr.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadChart" ImageUrl="img/ChartPr.gif">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="WinForms controls">  
                            <Items> 
                                <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/Combobox_Win.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadDock" ImageUrl="img/Dock_Win.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadGridView" ImageUrl="img/RadGrid.bmp">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/Tabstrip_Win.gif">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="Other projects">  
                            <Items> 
                                <telerik:RadPanelItem Text="SiteFinity" ImageUrl="img/st.gif">  
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="Reporting" ImageUrl="img/report.gif">  
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelBar> 
            </div> 
     
            <script type="text/javascript">  
                var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');  
                var timage = $get('<%= tbimage.ClientID %>');  
     
                if (panelDomElement) {  
                    SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);  
                }  
     
                var panelDomElementRight = $get('<%=RadPanelBar2.ClientID %>');  
                var timageRight = $get('<%= tbimageRight.ClientID %>');  
     
                if (panelDomElementRight) {  
                    SetUpAnimation(timageRight.id, Telerik.Web.UI.jSlideDirection.Left, panelDomElementRight);  
                }  
                function SetUpAnimation(image, direction, element) {  
                    element.style.position = "relative";  
                    var slider = document.getElementById(image);  
     
                    var expanded = false;  
     
                    var expandAnimation = new Telerik.Web.UI.AnimationSettings({});  
                    var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});  
     
                    var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);  
     
                    slide.initialize();  
     
                    slide.set_direction(direction);  
     
                    slider.onclick = function() {  
                        element.parentNode.style.visibility = "visible";  
                        element.parentNode.style.display = "block";  
                        if (!expanded) {  
                            slide.expand();  
                        }  
                        else {  
                            slide.collapse();  
                        }  
                        expanded = !expanded;  
                        return false;  
                    }  
                }  
            </script> 
     
        </div> 
        <div> 
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
            </asp:ContentPlaceHolder> 
        </div> 
        </form> 
    </body> 
    </html> 
     


    All the best,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Arjun
    Arjun avatar
    5 posts
    Member since:
    Oct 2007

    Posted 20 Apr 2010 Link to this post

    I am creating a support ticket for this problem. may be someone can answer to this.
Back to Top