Hide sliding panelbar (from live demo)

[Aaron Jessen]

In reference to this live demo (http://localhost:4519/radcontrols_aspnetajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx), can you tell me the correct (java) method for hiding the panelbar upon the mouse leaving the panelbar control instead of the toolbox image? The closest example I could find was the following thread: http://www.telerik.com/community/forums/aspnet-ajax/menu/how-to-show-hide-menu-on-mouseover-and-mouseout.aspx. With other attempts, I have been able to hide the control on blur of individual panelbar items or header items, but not the entire control, itself.

Thank you for your help!

Kind Regards,

Aaron T. Jessen

<

 

html xmlns="http://www.w3.org/1999/xhtml">

<

 

 

head runat="server">

 

 

 

 

<title></title>

 

 

 

 <style type="text/css">

 

 

body {
margin: 0;

 

 

 

 

padding: 0;

 

 

}

 

 

.style1

 

 

 

{

 

 

 

width: 134px;

 

 }

 

 

 

.leftPanelBarContainer

 

 

 

{

 

float: left;

 

 

 

 

width: 260px;

 

 

 

 

height: 260px;

 

 

 

 

overflow: auto;

 

 

 

 

position: relative; /* Required to workaround IE rendering bug*/

 

 

 

}

 

.RadPanelBar, .RadPanelBar .rpSlide, .RadPanelBar .rpGroup, .RadPanelBar .rpTemplate

 

 

 

{

 

overflow: visible !important;

 

}

 

 

 

div.RadPanelBar .rpLevel1 .rpItem

 

 

 

{

 

padding: 0;

 

}

 

 

 

* html .RadPanelBar .RadMenu ul.rmRootGroup

 

 

 

{

 

zoom: 1;

 

}

 

 

 

div.RadMenu .rmRootGroup

 

 

 

{

 

border: 0;

 

}

 

 

 

div.RadMenu .rmLink

 

 

 

{

 

float: none;

 

}

 

 

 

</style>

 

</

 

 

 

head>

 

<

 

 

 

body>

 

 

 

 

<form id="form1" runat="server">

 

 

<div>

 

 

 

<telerik:RadScriptManager ID="ScriptManager" runat="server" />

 

 

 

<table cellpadding="0" cellspacing="0" width="100%" style="height: 10px">

 

 

 

<tr>

 

 

 

<td id="headCell" runat="server" align="left" valign="top" style="height: 10px;">

 

 

 

<uc2:default ID="header" runat="server" />

 

 

 

</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

<asp:Label ID="lblHeader" runat="server" CssClass="standardtextsmall" Font-Bold="False"></asp:Label>

 

 

 

<asp:ImageButton runat="server" ID="tbimage" ImageUrl="~/images/general/toolbox.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" OnClientMouseOut="hidepanelbar">

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">

 

 

 

<Items>

 

 

 

<telerik:RadPanelItem Text="RadComboBox" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/ComboboxPr.gif">

 

 

 

</telerik:RadPanelItem>

 

 

 

<telerik:RadPanelItem Text="RadMenu" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/MenuPr.gif">

 

 

 

</telerik:RadPanelItem>

 

 

 

<telerik:RadPanelItem Text="RadTabStrip" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/TabstripPr.gif">

 

 

 

</telerik:RadPanelItem>

 

 

 

<telerik:RadPanelItem Text="RadPanelBar" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/PanelBarPr.gif">

 

 

 

</telerik:RadPanelItem>

 

 

 

 

 

<telerik:RadPanelItem Text="RadTreeView" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/TreeviewPr.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="RadToolBar" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/ToolbarPr.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="RadChart" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/ChartPr.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

</Items>

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="WinForms controls">

 

 

 

 

<Items>

 

 

 

 

<telerik:RadPanelItem Text="RadComboBox" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/Combobox_Win.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="RadDock" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/Dock_Win.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="RadGridView" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/RadGrid.bmp">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="RadTabStrip" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/Tabstrip_Win.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

</Items>

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="Other projects">

 

 

 

 

<Items>

 

 

 

 

<telerik:RadPanelItem Text="SiteFinity" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/st.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

<telerik:RadPanelItem Text="Reporting" ImageUrl="http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/img/report.gif">

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

</Items>

 

 

 

 

</telerik:RadPanelItem>

 

 

 

 

</Items>

 

 

 

 

</telerik:RadPanelBar>

 

 

 

 

</div>

 

 

 

 

</div>

 

 

 

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

 

 

<script type="text/javascript">

 

 

 

 

var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');

 

 

 

 

var timage = $get('<%= tbimage.ClientID %>');

 

 

 

 

if (panelDomElement) {

 

 

 

 

//SetUpAnimation(panelDomElement, Telerik.Web.UI.jSlideDirection.Right, 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);

slider.onmouseover =

 

 

function() {

 

element.parentNode.style.visibility =

 

 

"visible";

 

element.parentNode.style.display =

 

 

"block";

 

 

 

 

if (!expanded) {

 

slide.expand();

}

 

 

 

else {

 

slide.collapse();

}

expanded = !expanded;

 

 

 

return false;

 

}

}

 

 

 

function markItem(sender, args) {

 

 

 

 

// var attributes = args.get_item().get_attributes();

// attributes.setAttribute("visited", "true");

}

 

function hidepanelbar(e) {

 

 

 

// var panelbar = $find("<%= RadPanelbar1.ClientID %>");

// if ((!e.toElement) || (!$telerik.isDescendantOrSelf(panelbar.get_childListElement(), e.toElement))) {

// panelbar.hide();

// }

}

 

function hidepanel(sender, args) {

 

 

 

 

//var panel = $find("<%= RadPanelBar1.ClientID %>");

 

 

 

 

//panel.get_element().style.display = "none";

 

 

 

}

 

 

 

</script>

 

 

 

 

</telerik:RadCodeBlock>

 

 

 

 

</div>

 

 

 

 

</div> </div>

 

 

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

 

 

<AjaxSettings>

 

 

 

 

<telerik:AjaxSetting AjaxControlID="dropMachineType">

 

 

 

 

<UpdatedControls>

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="dropModel" />

 

 

 

 

</UpdatedControls>

 

 

 

 

</telerik:AjaxSetting>

 

 

 

 

<telerik:AjaxSetting AjaxControlID="headCell">

 

 

 

 

<UpdatedControls>

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="lblHeader"></telerik:AjaxUpdatedControl>

 

 

 

 

</UpdatedControls>

 

 

 

 

</telerik:AjaxSetting>

 

 

 

 

</AjaxSettings>

 

 

 

 

</telerik:RadAjaxManager>

 

 

 

 

</form>

 

</

 

 

 

body>

 

</

 

 

 

html>

 

 

 

[Paul]

Hi Aaron,

I guess it will be easier if you place the panelbar control in a sliding RadPane (RadSplitter control). For details on the matter please take a look at these examples.

Best wishes,
Paul
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.