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

MasterPage Affect?

2 Answers 136 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Nataraj
Top achievements
Rank 1
Nataraj asked on 09 Jul 2008, 03:54 PM
Hi,

I tried to implement the sliding panel bar with help of telerik online demos 
 http://www.telerik.com/DEMOS/ASPNET/Prometheus/PanelBar/Examples/ApplicationScenarios/SlidingPanelbar/DefaultCS.aspx
I created two asp pages. One page inherits Master page and the other page doesn't inherit the Master page. I used the same pieace of code available in the above demo site for both the pages.
I got the output for the page which doesn't inherit Master page but not for the other one. What could be the reason?

Additional info about my Master page:
My Master page has three divisions called "Header","Report","Footer" resp. Report division has the content place holder.

Why am i getting an javascript error?
Other than this method is there any other way to implement "Sliding Panel Bar" ?
Please provide me inputs. I need to implement this at any cost.

Thanks,
Nataraj

2 Answers, 1 is accepted

Sort by
0
Grissom
Top achievements
Rank 1
answered on 17 Jul 2008, 12:00 AM
I have same problem.
0
Paul
Telerik team
answered on 17 Jul 2008, 01:30 PM
Hello Grissom,

Please find below a sample code snippet that shows the needed approach.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">  
    <div style="height: 280px">  
        <asp:ImageButton runat="server" ID="tbimage" ImageUrl="Img/Toolbox.gif" Style="float: left; outline: 0;" /> 
        <div id="slidingDiv" style="visibility: hidden; position: relative; float: left; display: block">  
            <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="WebBlue" 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> 
        <asp:ImageButton runat="server" ID="tbimageRight" ImageUrl="Img/Toolbox.gif" Style="float: right; outline: 0;" /> 
        <div id="slidingDiv2" style="visibility: hidden; position: relative; float: right; display: block">  
            <telerik:RadPanelBar runat="server" ID="RadPanelBar2" Skin="WebBlue" 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 %>');  
          
        if (panelDomElement)  
        {  
            SetUpAnimation("ctl00_ContentPlaceHolder1_tbimage", Telerik.Web.UI.SlideDirection.Right,panelDomElement);  
        }  
          
        var panelDomElementRight = $get('<%=RadPanelBar2.ClientID %>');  
          
        if (panelDomElementRight)  
        {  
            SetUpAnimation("ctl00_ContentPlaceHolder1_tbimageRight", Telerik.Web.UI.SlideDirection.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.Slide(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> 
</asp:Content> 
 


All the best,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
PanelBar
Asked by
Nataraj
Top achievements
Rank 1
Answers by
Grissom
Top achievements
Rank 1
Paul
Telerik team
Share this question
or