This is a migrated thread and some comments may be shown as answers.
Hide sliding panelbar (from live demo)
1 Answer 47 Views
This is a migrated thread and some comments may be shown as answers.
Aaron Jessen
Top achievements
Rank 1
Aaron Jessen asked on 18 Jun 2009, 05:10 PM
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>

 

 

 

1 Answer, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 19 Jun 2009, 07:57 AM
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.
Asked by
Aaron Jessen
Top achievements
Rank 1
Answers by
Paul
Telerik team
Share this question
or