MasterPage Affect?

[Nataraj]

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

[Grissom]

I have same problem.

[Paul]

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