Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Sliding Panelbar in Master page

2 Answers 130 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Catriona Potter
Top achievements
Rank 1
Catriona Potter asked on 23 Apr 2009, 09:48 AM
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 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 23 Apr 2009, 10:48 AM
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.
0
Arjun
Top achievements
Rank 1
answered on 20 Apr 2010, 02:15 PM
I am creating a support ticket for this problem. may be someone can answer to this.
Tags
PanelBar
Asked by
Catriona Potter
Top achievements
Rank 1
Answers by
Paul
Telerik team
Arjun
Top achievements
Rank 1
Share this question
or