We help IT Professionals succeed at work.

Right Click TreeView Node

dsiemon
dsiemon asked
on
6,852 Views
Last Modified: 2013-12-17
I have the following code.. On right click, it brings up a nice pretty context menu..
However; This rigth click event is not tied to the TreeView Node, so that anywhere i right click brings up the Context Menu..

I would like use the below Code., still using Javascript of a compbitation of Ser and Client side
and be able to bind the Context menu to a righ click event  on a node in the TreeView

So, that I can actually capture teh node, if i do an add, modify or delete

Hope someone can help

Thanks

Dan
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Hilti_Reorg._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>xTreeView</title>
    <style type="text/css">
<!--
 
.skin0{
position:absolute;
width:140px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
 
.menuitems{
padding-left:10px;
padding-right:10px;
font-family:Verdana;
font-size:12px;
color:black;
}
-->
</style>
 
</head>
    
 
<body>
 <script type="text/javascript">
var menuskin = "skin0"; 
var display_url = 1; // Show URLs in status bar?
</script>
 
  <form id="theform" runat="server">
  <div id="ie5menu" class="skin0" onmouseover="highlightie5()" onmouseout="lowlightie5()"
            onclick="jumptoie5();">
            
        </div>
 
    <div>
 <asp:TreeView ID="TreeView1" runat="server" ImageSet="Arrows" PathSeparator="|" ShowCheckBoxes="All">
 
 
 
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
 
 
 
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"      VerticalPadding="0px" />
 
 
 
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px"      NodeSpacing="0px" VerticalPadding="0px" />
 
            <DataBindings>
                <asp:TreeNodeBinding DataMember="System.Data.DataRowView" 
                    TextField="Text" ValueField="ID" />
            </DataBindings>
 
</asp:TreeView>
 
 <asp:Panel ID="Panel2"  runat="server" style="display:none" BorderColor="Black" CssClass="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)"  >
                <div class="menuitems"><asp:LinkButton ID="LinkButton1" runat="server"   CssClass="menuitems" >New Node</asp:LinkButton></div>
                <div class="menuitems"><asp:LinkButton ID="LinkButton2" runat="server"   CssClass="menuitems">Edit Node</asp:LinkButton></div>
                <hr />
                <div class="menuitems"><asp:LinkButton ID="LinkButton3" runat="server"   CssClass="menuitems">Delete Node</asp:LinkButton></div>
                <hr />
                <div class="menuitems"><asp:LinkButton ID="LinkButton4" runat="server"   CssClass="menuitems">FAQS</asp:LinkButton></div>
                <div class="menuitems"><asp:LinkButton ID="LinkButton5" runat="server"   CssClass="menuitems">Online Help</asp:LinkButton></div>
                <hr />
                <div class="menuitems"><asp:LinkButton ID="LinkButton6" runat="server"   CssClass="menuitems">Email Me</asp:LinkButton></div>
            </asp:Panel>
            <br />
            <a href=""  > </a>
 
<asp:Button ID="cmdCheckSelectNode1" runat="server" Text="Nodes Selected" /><br /><br />
 
 
 
<asp:Label ID="lblShowMessage" runat="server" />  
 
  
    </div>
   </form>
<script src="xtreeview.js"  type="text/javascript"></script>
   <script type="text/javascript">
     // if (document.all) {
     //     ie5menu.className = menuskin;
     //     document.getElementById('TreeView1').oncontextmenu = showmenuie5;
     //     document.body.onclick = hidemenuie5;
      //}
     
    </script>
    
   
</body>
</html>
----------------------The .JS file------------------
 
// xtreeView JScript File
 
 
 
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("Panel2")
 
function showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
 
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
 
//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
 
if(ie5)
    window.event.cancelBubble = true;
else if(ns6)
    e.stopPropagation();
 
menuobj.style.visibility="visible"
 
    
return false
}
 
function hidemenuie5(e){
menuobj.style.visibility="hidden"
}
 
function highlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") 
firingobj=firingobj.parentNode //up one node
 
firingobj.style.backgroundColor="highlight"
 
}
}
 
function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") 
firingobj=firingobj.parentNode //up one node
 
firingobj.style.backgroundColor=""
 
 
window.status=''
}
}
 
function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") 
var firingobj2=firingobj.parentNode
// the click can be controlled by firingobj
// if the click was generated by the div tag enclosing the link buttons
//then the value of firingobj=htmlDivElement el
// else if the click was generated by the linkbutton
// then the value of firingobj will be href of the link button and the value of firingobj2 will be htmlDivElement
// the code for controlling the clciks goes here
 
}
}
 
if (ie5||ns6){
menuobj.style.display=''
document.onclick=hidemenuie5
 
}
 
 
----------------------------------------------------

Open in new window

Comment
Watch Question

Solutions Architect
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.