Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Using Javascript to the value of the clicked Node in TreeView

Using Javascript to the value of the clicked Node in TreeView Options
Previous Topic · Next Topic
Hunter
Posted: Friday, February 25, 2011 6:44:49 PM
Rank: Newbie
Groups: Member

Joined: 2/25/2011
Posts: 3
Using Visual Basic.Net 2010. I am using the TreeView component that launches the contextmenu component.

For the most part, I have it working just fine but I need to be able to trap the VALUE (in JavaScript) of the folder that gets right clicked on and which ultimately will bring up that context menu.

So when you right click on a folder and the contextmenu appears, I want to (via JavaScript) display an alert message that gives the value of the folder that was just clicked on prior to eo_ShowContextMenu() ....
Back to top
 
eo_support
Posted: Friday, February 25, 2011 7:18:16 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You would call this function to get the context node:

http://doc.essentialobjects.com/library/1/jsdoc.public.treeview.getcontextnode.aspx

Thanks!
Back to top
 
Hunter
Posted: Friday, February 25, 2011 7:57:47 PM
Rank: Newbie
Groups: Member

Joined: 2/25/2011
Posts: 3
I tried to treeView.getContextNode, but I think Im doing something wrong as as my alert box is showing the following:

ContextNode:function () {
return this.aafj;
}

--------------------------------------------------------------(SEE HERE US WHERE I ADDED)

[.aspx]
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function ShowContextMenu(e, treeView, node) {

'-----------------------------------------------------------------HERE IS WHERE I ADDED
var nid = treeView.getContextNode;
window.alert('ContextNode:' + nid);
'-----------------------------------------------------------------------------------------------


var menu = eo_GetObject("<%=Menu1.ClientID%>");
eo_ShowContextMenu(e, "<%=Menu1.ClientID%>");


return true;
}
function ContextClicked(evt, eventInfo) {

eo_Callback('<%=callbackPanel.ClientID%>', eventInfo.getItem().getValue());
return true;
}
</script>
<eo:ScriptEvent ID="ScriptEvent1" runat="server"></eo:ScriptEvent>
<eo:CallbackPanel ID="callbackPanel" runat="server" Height="150px" Width="230px">
<eo:TreeView ID="TreeView1" runat="server" Width="230px" ViewStateMode="Enabled" ControlSkinID="None" AutoWrap="True" AutoSelectSource="ItemClick" OnItemPopulate="TreeView1_ItemPopulate" ClientSideOnContextMenu="ShowContextMenu" RaisesServerEvent="true">
<LookNodes>
<eo:TreeNode ImageUrl="00030301" DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
CollapsedImageUrl="00030301" ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
ExpandedImageUrl="00030302" SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"></eo:TreeNode>
</LookNodes>
<TopGroup Style-CssText="color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
<Nodes>
<eo:TreeNode Text="Pages" ItemID="0" Value="0,0,F"></eo:TreeNode>
</Nodes>
</TopGroup>
</eo:TreeView>
</eo:CallbackPanel>
<asp:Label ID="Label1" runat="server" Text="Audit Value:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Height="85px" Width="282px"></asp:TextBox>
<eo:ContextMenu id="Menu1" Width="144px" runat="server" ControlSkinID="None" RaisesServerEvent="true" OnItemClick="Menu1_ItemClick">
<TopGroup Style-CssText="cursor:hand;font-family:Verdana;font-size:11px;">
<Items>
<eo:MenuItem Text-Html="Add a Folder"></eo:MenuItem>
<eo:MenuItem Text-Html="Delete"></eo:MenuItem>
<eo:MenuItem IsSeparator="True"></eo:MenuItem>
<eo:MenuItem Text-Html="Properties"></eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="background-color:#E0E0E0;height:1px;width:1px;"></eo:MenuItem>
<eo:MenuItem HoverStyle-CssText="color:#F7B00A;padding-left:5px;padding-right:5px;" ItemID="_Default" NormalStyle-CssText="padding-left:5px;padding-right:5px;">
<SubMenu ExpandEffect-Type="GlideTopToBottom" Style-CssText="border-right: #e0e0e0 1px solid; padding-right: 3px; border-top: #e0e0e0 1px solid; padding-left: 3px; font-size: 12px; padding-bottom: 3px; border-left: #e0e0e0 1px solid; cursor: hand; color: #606060; padding-top: 3px; border-bottom: #e0e0e0 1px solid; font-family: arial; background-color: #f7f8f9" CollapseEffect-Type="GlideTopToBottom" OffsetX="3" ShadowDepth="0" OffsetY="-4" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
</form>

</body>
Back to top
 
eo_support
Posted: Friday, February 25, 2011 8:08:00 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

It's a function. Not a property. So it should be:

treeView.getContextNode();

Also the function returns a TreeNode object:

http://doc.essentialobjects.com/library/1/jsdoc.public.treenode.aspx

You will have to call methods on the returned TreeNode object to get the node value. In fact you don't even need to call getContextNode. The right clicked node is already passed to you (the third argument is three tree node; The second argument is the treeView object which you calls getContextNode upon).

It appears that you are not familiar with our client side API yet. You will want to take a look of this topic to get some basic ideas about how to use our client side API:

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

Hope this helps.

Thanks!
Back to top
 
Hunter
Posted: Saturday, February 26, 2011 1:33:08 PM
Rank: Newbie
Groups: Member

Joined: 2/25/2011
Posts: 3
Hi,

Your correct, first time looking at the API.

The ANSWER for future users is simply: node.getValue() or node.getText() to see the folder name


Thanks again.
Back to top
 
eo_support
Posted: Saturday, February 26, 2011 6:29:08 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
You are very welcome. Yes. That is correct. getValue and getText is what you need.

Please feel free to let us know if you have any more questions.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.