Hello,
I have a side effect with the javascipt given in Telerik sample, When I want to add a RadTreeView, the treview stop expanding and collapsing when clicking on an image.
How could I correct this.
Here is my page code with javascript directly from the sample.
The Treeview is loaded from a custom control in one Pane.
RadPanelMenu is simply a class wrapper arounf RadPanelBar.
<%@ Control Language="c#" AutoEventWireup="true" %>
<%@ Register TagPrefix="cc1" Namespace="AW.WebControls" Assembly="WCore" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:ScriptManagerProxy ID="ScriptManagerProxyDeskTop" runat=server />
<div class="wt_DefaultLayoutDiv">
<div>
<cc1:WT3Panes ID="TPans" Height="100%" ShowLastSeparator="False" ShowFirstSeparator="False"
CellPadding="0" CellSpacing="0" runat="server">
<LeftPaneTemplate>
<div style="height:30px" ></div>
</LeftPaneTemplate>
<LeftPaneStyle CssClass="LeftPane" VerticalAlign="Top"></LeftPaneStyle>
<ContentPaneStyle CssClass="ContentPane" VerticalAlign="Top" HorizontalAlign="left">
</ContentPaneStyle>
<RightPaneStyle CssClass="RightPane" VerticalAlign="Top"></RightPaneStyle>
</cc1:WT3Panes>
</div>
<div style="position:fixed; top:0; left:0">
<asp:ImageButton runat="server" ID="tbimage" SkinID='FloatButton' Style="float: left; outline: 0;" />
<div id="slidingDiv" style="visibility: hidden; position: relative; float: left;
display: block">
<cc1:RadPanelMenuNavigation ID="NavMen" runat="server" Bind="BindOptionTop" UseTabNameInUrl="True" ShowImages='True'
AutoBind="True" EnableViewState='False' ExpandMode="MultipleExpandedItems" ImgWidth=20 BackColor=Transparent EnableTheming='true' PersistStateInCookie='true' >
</cc1:RadPanelMenuNavigation>
</div>
<script type="text/javascript">
var panelDomElement = $get('<%=NavMen.ClientID %>');
if (panelDomElement)
{
SetUpAnimation('<%=tbimage.ClientID %>', Telerik.Web.UI.SlideDirection.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.Slide(element, expandAnimation, collapseAnimation, false);
slide.initialize();
slide.set_direction(direction);
slider.onclick = function ()
{
element.parentNode.style.visibility = "visible";
element.parentNode.style.display = "block";
if (!expanded)
{
slide.expand();
}
else
{
slide.collapse();
}
expanded = !expanded;
return false;
}
}
</script>
</div>
</div>
Thanks for answer.
CS
I have a side effect with the javascipt given in Telerik sample, When I want to add a RadTreeView, the treview stop expanding and collapsing when clicking on an image.
How could I correct this.
Here is my page code with javascript directly from the sample.
The Treeview is loaded from a custom control in one Pane.
RadPanelMenu is simply a class wrapper arounf RadPanelBar.
<%@ Control Language="c#" AutoEventWireup="true" %>
<%@ Register TagPrefix="cc1" Namespace="AW.WebControls" Assembly="WCore" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:ScriptManagerProxy ID="ScriptManagerProxyDeskTop" runat=server />
<div class="wt_DefaultLayoutDiv">
<div>
<cc1:WT3Panes ID="TPans" Height="100%" ShowLastSeparator="False" ShowFirstSeparator="False"
CellPadding="0" CellSpacing="0" runat="server">
<LeftPaneTemplate>
<div style="height:30px" ></div>
</LeftPaneTemplate>
<LeftPaneStyle CssClass="LeftPane" VerticalAlign="Top"></LeftPaneStyle>
<ContentPaneStyle CssClass="ContentPane" VerticalAlign="Top" HorizontalAlign="left">
</ContentPaneStyle>
<RightPaneStyle CssClass="RightPane" VerticalAlign="Top"></RightPaneStyle>
</cc1:WT3Panes>
</div>
<div style="position:fixed; top:0; left:0">
<asp:ImageButton runat="server" ID="tbimage" SkinID='FloatButton' Style="float: left; outline: 0;" />
<div id="slidingDiv" style="visibility: hidden; position: relative; float: left;
display: block">
<cc1:RadPanelMenuNavigation ID="NavMen" runat="server" Bind="BindOptionTop" UseTabNameInUrl="True" ShowImages='True'
AutoBind="True" EnableViewState='False' ExpandMode="MultipleExpandedItems" ImgWidth=20 BackColor=Transparent EnableTheming='true' PersistStateInCookie='true' >
</cc1:RadPanelMenuNavigation>
</div>
<script type="text/javascript">
var panelDomElement = $get('<%=NavMen.ClientID %>');
if (panelDomElement)
{
SetUpAnimation('<%=tbimage.ClientID %>', Telerik.Web.UI.SlideDirection.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.Slide(element, expandAnimation, collapseAnimation, false);
slide.initialize();
slide.set_direction(direction);
slider.onclick = function ()
{
element.parentNode.style.visibility = "visible";
element.parentNode.style.display = "block";
if (!expanded)
{
slide.expand();
}
else
{
slide.collapse();
}
expanded = !expanded;
return false;
}
}
</script>
</div>
</div>
Thanks for answer.
CS