sliding radpanel start in open position

[khaled]

I made a sliding panal as your example but with a little deferent that the panel in (OCX) user Control , it work fine but the problem is that it start in an open position , i want it to start closed and be opened when i click the button . my code is :

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

       <%-- <script src="scripts.js" type="text/javascript"></script>--%>
 <%-- /**/--%>

        <script type="text/javascript">
            Sys.Application.add_load(function() {

                demo.rightPanel = $get('<%=RadPanelBar2.ClientID %>');
              <%--  demo.rightButton = $get('<%=rightbutton.ClientID %>');--%>
                demo.rightButton = document.getElementById("rightbutton");

              <%--  demo.rightButton = $find("<%=rightbutton.ClientID %>");--%>

                demo.initialize();
            });
        </script>
    </telerik:RadScriptBlock>

<div class="right-pane">
            <input type="image" id="rightbutton" class="button" src="../images/ElmosamenIcon.png" />

   <%--  <telerik:RadButton RenderMode="Lightweight" ID="rightbutton" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="53px" Height="53px" AutoPostBack="false" ForeColor="Black" Checked="true" >
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="../images/ElmosamenIcon.png" HoveredImageUrl="../images/ElmosamenIcon.png"
                                Text="Play" Selected="true"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="../images/ElmosamenIconclosed.png" HoveredImageUrl="../images/ElmosamenIconclosed.png"
                                Text="Pause"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>--%>

            <div class="sliding-pane">
            <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar2" runat="server"  Width="200px"  skin="BlackMetroTouch" Height="605px"  ExpandMode="FullExpandedItem" 
             DataSourceID="SqlDataSource1" DataFieldID="id" DataFieldParentID="ParentId" DataTextField="Text" DataNavigateUrlField="HyperLink" ViewStateMode="Enabled">
            <DataBindings>
                <telerik:RadPanelItemBinding  Depth="0" ImageUrl="ImageURL"  Expanded="true"  />
            </DataBindings>
        </telerik:RadPanelBar>


            </div>
        </div>

 

with  a java script code as

(function () {
    var demo = window.demo = window.demo || {};



    demo.initialize = function () {


        var rightPanel = demo.rightPanel;
        var rightButton = demo.rightButton;

        if (rightPanel) {
            SetUpAnimation(rightButton, Telerik.Web.UI.jSlideDirection.left, rightPanel);
        }
    }

    window.SetUpAnimation = function (button, direction, element) {
        element.style.position = "relative";

        var expanded = true;

        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);

        button.onclick = function () {
            element.parentNode.style.visibility = "visible";
            element.parentNode.style.display = "block";
            if (!expanded) {
                slide.expand();
            }
            else {
                slide.collapse();
            }
            expanded = !expanded;
            return false;
        }
    };
}())

I also try to use a Rad button with type  ToggleButton  to change the button image when i click the button , it work well but the problem it is appear in the left side of the sliding panel

 

                                                        

[Vessy]

Hi khaled,

Can you remove the Expanded="true" property of the RadPanelItemBinding and see if the behavior is the same? Also, can you make sure that there are no any JavaScript errors thrown on the page when the issue occurs?

            <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar2" runat="server"  Width="200px"  skin="BlackMetroTouch" Height="605px"  ExpandMode="FullExpandedItem" 
             DataSourceID="SqlDataSource1" DataFieldID="id" DataFieldParentID="ParentId" DataTextField="Text" DataNavigateUrlField="HyperLink" ViewStateMode="Enabled">
            <DataBindings>
                <telerik:RadPanelItemBinding  Depth="0" ImageUrl="ImageURL"  Expanded="true"  />
            </DataBindings>
        </telerik:RadPanelBar>

 

Regards,
Vessy
Progress Telerik

[khaled]

Thank you Vessy for your reply , I remove the tag expanded = true but it is still appear and the items become collapses

I'm sure there is no java script error I debug the code no error in this part

 

[Vessy]

Hi khaled, 

Can you, please, confirm that you have added the styles from the following demo along with the applied client-side logic?

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

.right-pane {
    float: right;
    overflow: visible;
    position: relative;
}

    .right-pane .button {
        float: right;
    }

    .right-pane .sliding-pane {
        float: right;
        visibility: hidden;
    }

[khaled]

thank you , yes I change the 

 visibility: hidden; , so it start hidden  ,but leave the sapce appear "right pane" still visible but empty, i need to space also shrink 

[khaled]

thank you it work now as example

[Vessy]

You are welcome, khaled :)