sliding radpanel start in open position

1 Answer 8 Views
PanelBar
khaled
Top achievements
Rank 1
khaled asked on 16 Nov 2021, 12:03 PM

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

 

                                                        

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 19 Nov 2021, 05:50 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

khaled
Top achievements
Rank 1
commented on 19 Nov 2021, 08:18 PM

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
Telerik team
commented on 26 Nov 2021, 07:57 PM

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
Top achievements
Rank 1
commented on 27 Nov 2021, 01:15 PM

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
Top achievements
Rank 1
commented on 27 Nov 2021, 01:36 PM | edited

thank you it work now as example
Vessy
Telerik team
commented on 30 Nov 2021, 06:42 AM

You are welcome, khaled :)
Tags
PanelBar
Asked by
khaled
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or