Initial state of the Sliding Panelbar

[Bill]

How can I modify example given in Sliding PanelBar to start with open position of the Panel Bar instead of closed.

When I change  var expanded = false; from false to true I get an error: “Line 1534. Error: Invalid Argument”

Thanks in advance

[Paul]

Hello Bill,

Here's a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:ImageButton runat="server" ID="tbimage" ImageUrl="dash-board.gif" Style="float: left;
outline: 0; width: 21px" />
<div class="leftPanelBarContainer">
<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>

<script type="text/javascript">
var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');
var timage = $get('<%= tbimage.ClientID %>');

if (panelDomElement) {
    SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
}

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

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

    toggleVisibility();

    slider.onclick = toggleVisibility;
}
</script>

</div>
</form>

Sincerely yours,
Paul
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Bill]

Thanks for the code, Paul!
It worked with one little exception – apparently my version of Telerik (ASP.NET AJAX Q3 2008) does not have Telerik.Web.UI.jSlide function. I replaced it with Telerik.Web.UI.Slide that is used in original Sliding Panelbar example.

Here is a problem I still have with the Sliding Panelbar: the state of the sliding panel bar is lost after the postback. When user closes (slides in) the panel bar after postback it loads in opened position. 

Thanks