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

Sliding PanelBar

5 Answers 128 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
C
Top achievements
Rank 1
C asked on 17 Mar 2009, 02:08 PM
What should I do to get this example to work?

http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx


Thanks

5 Answers, 1 is accepted

Sort by
0
Groupe CDGI
Top achievements
Rank 1
answered on 18 Mar 2009, 04:51 PM
The code is available for each example...
[reply edited by Telerik Admin]
0
C
Top achievements
Rank 1
answered on 18 Mar 2009, 04:55 PM
The code in the example doesn't work.
[reply edited by Telerik Admin]

0
Groupe CDGI
Top achievements
Rank 1
answered on 18 Mar 2009, 05:01 PM
I took the time to copy and paste into a new page i made in a website i'm currently working on, i had to change a few things to remove the QSF (quickstart files) that they use and do not provide and then when all errors were corrected, i simply hit F5 and everything worked fine...

[reply edited by Telerik Admin]
0
C
Top achievements
Rank 1
answered on 19 Mar 2009, 07:35 PM
You would also have had to fix the bugs in the javascript.

This example does not work by 'simply' copying and pasting. 

[reply edited by Telerik Admin]
0
Paul
Telerik team
answered on 20 Mar 2009, 08:10 AM
Hi guys,

Please abide by the rules in Telerik Forums and do not use offensive language. There is no need to create tension for just trivial questions. We had to remove a couple of comments from the previous replies as offensive language is not tolerated in Telerik forums.

As to the specific question, the JS code from the example might not work when pasted in a master page. By mistake, we have hardcoded the id of the image (tbimage) in SetUpAnimation function:

Wrong:
if (panelDomElement)  
{  
    SetUpAnimation("tbimage", Telerik.Web.UI.jSlideDirection.Right,panelDomElement);  
} 

So, here's the modified code that shoudl work in all cases:

<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> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
    </telerik:RadScriptManager> 
    <asp:ImageButton runat="server" ID="tbimage" ImageUrl="Img/Toolbox.gif" Style="float: left;  
        outline: 0; width: 21px" /> 
    <div class="leftPanelBarContainer">  
        <div style="float: left; width: 250px; height: 250px; overflow: auto">  
            <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> 
    </div> 
    <asp:ImageButton runat="server" ID="tbimageRight" ImageUrl="Img/Toolbox.gif" Style="float: right;  
        outline: 0;" /> 
    <div class="rightPanelBarContainer">  
        <div style="float: right; overflow: auto; width: 250px; height: 250px;">  
            <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> 
        </div> 
    </div> 
 
    <script type="text/javascript">  
        var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');  
        var timage = $get('<%= tbimage.ClientID %>');  
        var timageRight = $get('<%= tbimageRight.ClientID %>');  
 
        if (panelDomElement) {  
            SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);  
        }  
 
        var panelDomElementRight = $get('<%=RadPanelBar2.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> 
 
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
    </asp:ContentPlaceHolder> 
    </form> 
</body> 
</html> 


Kind regards,
Ivo Nedkov
Unit Manager, Rad Controls for ASP.NET AJAX
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.
Tags
PanelBar
Asked by
C
Top achievements
Rank 1
Answers by
Groupe CDGI
Top achievements
Rank 1
C
Top achievements
Rank 1
Paul
Telerik team
Share this question
or