Solved

How to capture right click event on javascript context menu using an ASP.NET Tree View - C# / WebApplication

Posted on 2010-09-16
9
1,200 Views
Last Modified: 2012-05-10
Hello all,

I have recently made a web application in ASP.NET C# and its purpose is to allow the user to modify the xml file through a ASP Treeview control. The user can right click a tree node and a Javascript context menu will appear with delete, add and edit. The "add" menu option is just a label using AJAX Poppupcontroller to display text boxes and a submit button and the other 2 menu options are link buttons. These functionalities are working great!

Now to the problem..

In order to modify a tree node, the user has to first left click to select the node, the page will refresh and return with that node highlighted as selected, and then they can right click the node to perform the modification.

I am not sure how I can discard the left click in order to provide the user with an easy modification as to just right click on any node they want and it will get the node they clicked.

If someone could provide a javascript / ajax example as to how to capture the right click event that would be great!

Ps. im new to javascript :(

Thanks.
0
Comment
Question by:Baxta
  • 5
  • 4
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33692365
<a href="#" oncontextmenu="doSomeThing(); return false">do something on right click</a>
0
 

Author Comment

by:Baxta
ID: 33692777
Thanks for the quick reply mplungjan!

I tried your solution and unfortunately it is not working :( It is underlining the word "oncontextmenu" as it is not a valid attribute of <a>. Any reason?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33693072
0
 

Author Comment

by:Baxta
ID: 33694876
Ok, so the error is gone. However I cannot connect the dots to get the right click to grab the node I right click.

Here is some sample code of mine below..

-Context menu
-Javascript
-contextmenu function assigned to each node


Hope you can see what I am going through.

Thanks
<%-- CONTEXT MENU ON RIGHT CLICK --%>
<asp:Panel ID="Panel2" runat="server" display="none" BorderColor="Black" CssClass="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" >
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><asp:Label ID="btn_addCategory" runat="server" CssClass="menuitems" Width="90">Add Category</asp:Label></a></div>
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><asp:Label ID="btn_addLOB" runat="server" CssClass="menuitems" Width="90">Add LOB</asp:Label></a></div>
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><asp:LinkButton ID="btn_edit" runat="server" CssClass="menuitems" OnClick="editNode" Width="90">Edit</asp:LinkButton></a></div>
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><asp:LinkButton ID="btn_deleteme" runat="server" CssClass="menuitems" 
            OnClientClick="return confirm('Are you sure you want to delete this element?');" OnClick="deleteNode" Width="90">Delete</asp:LinkButton></a></div>
    </asp:Panel>

//////////////////////////////////////
//This is some a brief view of the 
//javascript i am using           ////

var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
menuobj= document.getElementById("ctl00_ContentPlaceHolder_Panel2")
treeviewobj=document.getElementById("ctl00_ContentPlaceHolder_treeviewAdmin")
var selected_tree
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
    selected_tree = event.srcElement.firstChild;
menuobj.style.visibility="visible"
}

function jumptoie5(e)
{
    //find the selected node from the treeview
    
    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
}

/////////////////////////////////////
//This is in .CS file used on      //
//treeview on page load to assign  //
//JS value to each node in the tree//
/////////////////////////////////////

public string NewChildNode(string name)
{
  return "<b oncontextmenu=\"return showmenuie5(event)\" >" + name + "</b>";
}

Open in new window

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33695625
Can you paste the actual HTML from the view-source? I can do nothing with asp
0
 

Author Comment

by:Baxta
ID: 33696018
Ok no problem.. here it is.
<!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><title>
         Testing Treeview Nodes
      </title>
    
    <script type="text/javascript" language="javascript">
        
        function pageLoad()
        {  
            //find the PopupControlExtender's client behavior  
            var pce = $find("pce");
            var pce2 = $find("pce2");  
            //add the shown event handlers
            pce.add_shown(pceShownHandler);
            pce2.add_shown(pce2ShownHandler);
        }  
        
        function pceShownHandler(sender, args)
        {
            var pce = $find("pce");
            //find the popup Panel of the PopupControlExtender  
            var popup = pce._popupElement;
            var input = popup.getElementsByTagName("input");
            
            for (i = 0; i < input.length; i++)
            {
                // To check whether the TextBox is the "txt_catAttName".
                if (input[i].id == "ctl00_ContentPlaceHolder_txt_catAttName") 
                {  
                    input[i].focus();  
                    input[i].select();  
                }
            }
        }
        
        function pce2ShownHandler(sender, args)
        {
            var pce2 = $find("pce2");
            //find the popup Panel of the PopupControlExtender  
            var popup2 = pce2._popupElement;
            var input2 = popup2.getElementsByTagName("input");
            
            for (i = 0; i < input2.length; i++)
            {
                // To check whether the TextBox is the "txt_catAttName".
                if (input2[i].id == "ctl00_ContentPlaceHolder_txt_attname") 
                {  
                    input2[i].focus();  
                    input2[i].select();  
                }
            }
        }
        
    </script>
                
<style type="text/css"> 
	.ctl00_ContentPlaceHolder_treeviewAdmin_0 { font-weight:bold;text-decoration:none; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_1 { color:Black;font-family:Tahoma;font-size:8pt; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_2 { padding:0px 0px 0px 0px; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_3 { font-weight:normal; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_4 {  }
	.ctl00_ContentPlaceHolder_treeviewAdmin_5 { color:#5555DD;text-decoration:underline; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_6 { background-color:#6699FF;padding:0px 0px 0px 0px; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_7 { color:#5555DD;text-decoration:underline; }
	.ctl00_ContentPlaceHolder_treeviewAdmin_8 { color:#5555DD;text-decoration:underline; }
 
</style></head>
<body>
   <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td rowspan="2" align="right" valign="top" background="~/bg.gif" scope="row"><img src="~/bg_left.gif" width="17" height="100%"></td>
    <td width="70%" height="1" align="left" valign="top">
      <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
        <tr>
          <th height="30" align="left" background="~/middle.gif" bgcolor="#FF9900" scope="row">
          <table  border="0" cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
              <th width="8%" align="left" scope="row"><img src="~/icelogo_4.gif" width="37" height="31"></th>
              <td width="83%" align="left"></td>
              <td width="9%"><img src="~/logo_4.gif" width="77" height="31"></td>
            </tr>
          </table>
          </th>
        </tr>
        <tr>
          <th height="25" bgcolor="#EEEEEE" scope="row" align=center><span id="ctl00_lbl_title">Calltracking - user</span><br/><img src="~/clear.gif" width="500" height="1"></th>
        </tr>
        <tr>
          <th height="7" scope="row"><img src="~/middle_2.gif" width="100%" height="7"></th>
        </tr>
      </table>
    </td>
    <td rowspan="2" align="left" valign="top" background="~/bgR.gif" bgcolor="#F9F9F9"><img src="~/bg_right.gif" width="17" height="100%"></td>
  </tr>
  <tr>
    <td align="center" valign="top">
        
    <form name="aspnetForm" method="post" action="Treeview.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_ContentPlaceHolder_ToolkitScriptManager1_HiddenField" id="ctl00_ContentPlaceHolder_ToolkitScriptManager1_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="ctl00_ContentPlaceHolder_treeviewAdmin_ExpandState" id="ctl00_ContentPlaceHolder_treeviewAdmin_ExpandState" value="eennnneen" />
<input type="hidden" name="ctl00_ContentPlaceHolder_treeviewAdmin_SelectedNode" id="ctl00_ContentPlaceHolder_treeviewAdmin_SelectedNode" value="ctl00_ContentPlaceHolder_treeviewAdmint8" />
<input type="hidden" name="ctl00_ContentPlaceHolder_treeviewAdmin_PopulateLog" id="ctl00_ContentPlaceHolder_treeviewAdmin_PopulateLog" value="" />

</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=S0Ra64D98HXrGSWK-ozgpA2&amp;t=633802513995006876" type="text/javascript"></script>
 
 
<script src="/ScriptResource.axd?d=STOReLNloH4ZgEQyyQNm7bwSQIJBWboNEDMd2_VPL9lU5nfYtG8hUz9U38ZK67BKyXnw70q_2aVlykpMyuCUUA2&amp;t=5155db28" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
 
    function TreeView_PopulateNodeDoCallBack(context,param) {
        WebForm_DoCallback(context.data.treeViewID,param,TreeView_ProcessNodeData,context,TreeView_ProcessNodeData,false);
    }
var ctl00_ContentPlaceHolder_treeviewAdmin_Data = null;//]]>
</script>
 
<script src="/ScriptResource.axd?d=STOReLNloH4ZgEQyyQNm7bwSQIJBWboNEDMd2_VPL9kM3kmFCmNk2fotpPrktZ8Xd0fTeRqmVw5d5YdUsdKFIA2&amp;t=5155db28" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=lSGLLbudLzvop7dTgPJlrKEy1ZA4BrIn9pZhEnGzDpytzwsqIEdghpboY4NqcMdq0&amp;t=11e6618b" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
 
<script src="/ScriptResource.axd?d=lSGLLbudLzvop7dTgPJlrKEy1ZA4BrIn9pZhEnGzDpy0f4bKhSj7CoNaPCoSZyV-O5Do0yIth4pYDzJ9TtdKRA2&amp;t=11e6618b" type="text/javascript"></script>
<script src="/user/Treeview.aspx?_TSM_HiddenField_=ctl00_ContentPlaceHolder_ToolkitScriptManager1_HiddenField&amp;_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d3.5.40412.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a1547e793-5b7e-48fe-8490-03a375b13a33%3ade1feab2%3af9cec9bc%3aa67c2700%3af2c8e708%3a720a52bf%3a589eaa30%3a698129cf%3a59fb9c6f" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
 
<div>
 
	<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="G_ZXZHLHlgVkQAO4_fX76rFFFZtRgitjBDG_HkKjpSc1" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWFwLt6f6cBgLrhpLsDALuhpLsDAKI5oSRAQLX5obFDALvrN3IDALh2JWKAQL7+/bFCQLS14KjCQLOp73+DQK1xsXqCgKjx/fKDAKO96H1DALO3OG9BwKI+5j/CAKQpdl5Ar7awLYFAuib0ooNAq7goKcLApGW3soNAr7a1JEOAsGujdoBAs/7gIsLL7dHb+6i/LIiLZdEbZEOcgjCXr8=" />
</div>
        <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder$ToolkitScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
 
        
        <table class="tbl" cellspacing="3" cellpadding="5" style="border-style:solid; border-color:Gray;">
            <tr>
                <td align="left">
                    <a id="ctl00_ContentPlaceHolder_lnk1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder$lnk1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default.aspx&quot;, false, true))">Admin - Home</a>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <a id="ctl00_ContentPlaceHolder_lnk2" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder$lnk2&quot;, &quot;&quot;, false, &quot;&quot;, &quot;../Logout.aspx&quot;, false, true))">Logout</a>
                </td>
            </tr>
        </table>
        
        <div class="title">
        <span id="ctl00_ContentPlaceHolder_Label1" class="label2">
</span>
        </div>
        <br />
        <br />
        <div class="leftside" align="left">
            <a href="#ctl00_ContentPlaceHolder_treeviewAdmin_SkipLink"><img alt="Skip Navigation Links." width="0" height="0" style="border-width:0px;" /></a><div id="ctl00_ContentPlaceHolder_treeviewAdmin" class="treeLayout" AllowNodedEditing="true" style="font-weight:bold;">
	<table cellpadding="0" cellspacing="0" style="border-width:0;">
		<tr>
			<td><a id="ctl00_ContentPlaceHolder_treeviewAdminn0" href="javascript:TreeView_ToggleNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data,0,ctl00_ContentPlaceHolder_treeviewAdminn0,'r',ctl00_ContentPlaceHolder_treeviewAdminn0Nodes)"><img src="../rminus.gif" alt="Collapse &lt;b oncontextmenu=&quot;return showmenuie5(event)&quot; >App1&lt;/b>" style="border-width:0;" /></a></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s744f98fb-6f41-4bfa-8055-768fe064e16d')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint0');" id="ctl00_ContentPlaceHolder_treeviewAdmint0"><b oncontextmenu="return showmenuie5(event)" >App1</b></a></td>
		</tr><tr style="height:0px;">
			<td></td>
		</tr>
	</table><div id="ctl00_ContentPlaceHolder_treeviewAdminn0Nodes" style="display:block;">
		<table cellpadding="0" cellspacing="0" style="border-width:0;">
			<tr style="height:0px;">
				<td></td>
			</tr><tr>
				<td><div style="width:20px;height:1px"><img src="../i.gif" alt="" /></div></td><td><a id="ctl00_ContentPlaceHolder_treeviewAdminn1" href="javascript:TreeView_ToggleNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data,1,ctl00_ContentPlaceHolder_treeviewAdminn1,'l',ctl00_ContentPlaceHolder_treeviewAdminn1Nodes)"><img src="../lminus.gif" alt="Collapse &lt;b oncontextmenu=&quot;return showmenuie5(event)&quot; >Category One&lt;/b>" style="border-width:0;" /></a></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2 ctl00_ContentPlaceHolder_treeviewAdmin_4" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1 ctl00_ContentPlaceHolder_treeviewAdmin_3" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s744f98fb-6f41-4bfa-8055-768fe064e16d\\b455da38-c391-4176-aa4b-5bedbe88baa7')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint1');" id="ctl00_ContentPlaceHolder_treeviewAdmint1"><b oncontextmenu="return showmenuie5(event)" >Category One</b></a></td>
			</tr><tr style="height:0px;">
				<td></td>
			</tr>
		</table><div id="ctl00_ContentPlaceHolder_treeviewAdminn1Nodes" style="display:block;">
			<table cellpadding="0" cellspacing="0" style="border-width:0;">
				<tr style="height:0px;">
					<td></td>
				</tr><tr>
					<td><div style="width:20px;height:1px"><img src="../i.gif" alt="" /></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="../t.gif" alt="" /></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><input type="checkbox" name="ctl00_ContentPlaceHolder_treeviewAdminn2CheckBox" id="ctl00_ContentPlaceHolder_treeviewAdminn2CheckBox" /><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s744f98fb-6f41-4bfa-8055-768fe064e16d\\b455da38-c391-4176-aa4b-5bedbe88baa7\\5abb142b-d2f8-4e95-96d5-f28a5bd75712')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint2');" id="ctl00_ContentPlaceHolder_treeviewAdmint2"><b oncontextmenu="return showmenuie5(event)" >CheckBox1</b></a></td>
				</tr><tr style="height:0px;">
					<td></td>
				</tr>
			</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
				<tr style="height:0px;">
					<td></td>
				</tr><tr>
					<td><div style="width:20px;height:1px"><img src="../i.gif" alt="" /></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="../t.gif" alt="" /></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><input type="checkbox" name="ctl00_ContentPlaceHolder_treeviewAdminn3CheckBox" id="ctl00_ContentPlaceHolder_treeviewAdminn3CheckBox" /><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s744f98fb-6f41-4bfa-8055-768fe064e16d\\b455da38-c391-4176-aa4b-5bedbe88baa7\\9cb213f0-6a22-4f3a-8790-4643a41d082e')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint3');" id="ctl00_ContentPlaceHolder_treeviewAdmint3"><b oncontextmenu="return showmenuie5(event)" >CheckBox2</b></a></td>
				</tr><tr style="height:0px;">
					<td></td>
				</tr>
			</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
				<tr style="height:0px;">
					<td></td>
				</tr><tr>
					<td><div style="width:20px;height:1px"><img src="../i.gif" alt="" /></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="../t.gif" alt="" /></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><input type="checkbox" name="ctl00_ContentPlaceHolder_treeviewAdminn4CheckBox" id="ctl00_ContentPlaceHolder_treeviewAdminn4CheckBox" /><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s744f98fb-6f41-4bfa-8055-768fe064e16d\\b455da38-c391-4176-aa4b-5bedbe88baa7\\48a0b8e4-cc49-455e-b0f9-246d136f2fae')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint4');" id="ctl00_ContentPlaceHolder_treeviewAdmint4"><b oncontextmenu="return showmenuie5(event)" >CheckBox3</b></a></td>
				</tr><tr style="height:0px;">
					<td></td>
				</tr>
			</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
				<tr style="height:0px;">
					<td></td>
				</tr><tr>
					<td><div style="width:20px;height:1px"><img src="../i.gif" alt="" /></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="../l.gif" alt="" /></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><input type="checkbox" name="ctl00_ContentPlaceHolder_treeviewAdminn5CheckBox" id="ctl00_ContentPlaceHolder_treeviewAdminn5CheckBox" /><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s744f98fb-6f41-4bfa-8055-768fe064e16d\\b455da38-c391-4176-aa4b-5bedbe88baa7\\37f4f6f6-c4a5-424d-b2d4-d55c5bde3835')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint5');" id="ctl00_ContentPlaceHolder_treeviewAdmint5"><b oncontextmenu="return showmenuie5(event)" >CheckBox4</b></a></td>
				</tr><tr style="height:0px;">
					<td></td>
				</tr>
			</table>
		</div>
	</div><table cellpadding="0" cellspacing="0" style="border-width:0;">
		<tr style="height:0px;">
			<td></td>
		</tr><tr>
			<td><a id="ctl00_ContentPlaceHolder_treeviewAdminn6" href="javascript:TreeView_ToggleNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data,6,ctl00_ContentPlaceHolder_treeviewAdminn6,'l',ctl00_ContentPlaceHolder_treeviewAdminn6Nodes)"><img src="../lminus.gif" alt="Collapse &lt;b oncontextmenu=&quot;return showmenuie5(event)&quot; >App2&lt;/b>" style="border-width:0;" /></a></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s809edfb1-c732-4fc6-bf56-7502d20bd5ea')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint6');" id="ctl00_ContentPlaceHolder_treeviewAdmint6"><b oncontextmenu="return showmenuie5(event)" >App2</b></a></td>
		</tr><tr style="height:0px;">
			<td></td>
		</tr>
	</table><div id="ctl00_ContentPlaceHolder_treeviewAdminn6Nodes" style="display:block;">
		<table cellpadding="0" cellspacing="0" style="border-width:0;">
			<tr style="height:0px;">
				<td></td>
			</tr><tr>
				<td><div style="width:20px;height:1px"></div></td><td><a id="ctl00_ContentPlaceHolder_treeviewAdminn7" href="javascript:TreeView_ToggleNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data,7,ctl00_ContentPlaceHolder_treeviewAdminn7,'l',ctl00_ContentPlaceHolder_treeviewAdminn7Nodes)"><img src="../lminus.gif" alt="Collapse &lt;b oncontextmenu=&quot;return showmenuie5(event)&quot; >Category One&lt;/b>" style="border-width:0;" /></a></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2 ctl00_ContentPlaceHolder_treeviewAdmin_4" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1 ctl00_ContentPlaceHolder_treeviewAdmin_3" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s809edfb1-c732-4fc6-bf56-7502d20bd5ea\\dd3ab737-2c7e-40d7-b347-d75c93119b98')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint7');" id="ctl00_ContentPlaceHolder_treeviewAdmint7"><b oncontextmenu="return showmenuie5(event)" >Category One</b></a></td>
			</tr><tr style="height:0px;">
				<td></td>
			</tr>
		</table><div id="ctl00_ContentPlaceHolder_treeviewAdminn7Nodes" style="display:block;">
			<table cellpadding="0" cellspacing="0" style="border-width:0;">
				<tr style="height:0px;">
					<td></td>
				</tr><tr>
					<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="../l.gif" alt="" /></td><td class="ctl00_ContentPlaceHolder_treeviewAdmin_2 ctl00_ContentPlaceHolder_treeviewAdmin_6" onmouseover="TreeView_HoverNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><input type="checkbox" name="ctl00_ContentPlaceHolder_treeviewAdminn8CheckBox" id="ctl00_ContentPlaceHolder_treeviewAdminn8CheckBox" /><a class="ctl00_ContentPlaceHolder_treeviewAdmin_0 ctl00_ContentPlaceHolder_treeviewAdmin_1 ctl00_ContentPlaceHolder_treeviewAdmin_5" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$treeviewAdmin','s809edfb1-c732-4fc6-bf56-7502d20bd5ea\\dd3ab737-2c7e-40d7-b347-d75c93119b98\\1b98cf3a-c43a-408e-a730-18530a1c5ecb')" onclick="TreeView_SelectNode(ctl00_ContentPlaceHolder_treeviewAdmin_Data, this,'ctl00_ContentPlaceHolder_treeviewAdmint8');" id="ctl00_ContentPlaceHolder_treeviewAdmint8"><b oncontextmenu="return showmenuie5(event)" >CheckBox1</b></a></td>
				</tr><tr style="height:0px;">
					<td></td>
				</tr>
			</table>
		</div>
	</div>
</div>
        </div>
        
        <div id="rightside">
        
        </div>
        
        <br />
        <br />
            
        <div id="ctl00_ContentPlaceHolder_pnl_add_category" class="popupControl" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ContentPlaceHolder_btn_savecategory')">
	
            <table>
                <tr>
                    <td>
                        -- Node Attributes --
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="ctl00_ContentPlaceHolder_lbl_category">Category:</span>
                    </td>
                    <td>
                        <input name="ctl00$ContentPlaceHolder$txt_category" type="text" value="Category" maxlength="250" readonly="readonly" id="ctl00_ContentPlaceHolder_txt_category" style="background-color:inactivecaption;width:100px;padding-right:50px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="ctl00_ContentPlaceHolder_lbl_attname">Attribute Name:</span>
                    </td>
                    <td>
                        <input name="ctl00$ContentPlaceHolder$txt_catAttName" type="text" maxlength="250" id="ctl00_ContentPlaceHolder_txt_catAttName" style="width:100px;padding-right:50px" />
                            <span id="ctl00_ContentPlaceHolder_RequiredFieldValidator1" style="color:Red;visibility:hidden;">Required</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input type="submit" name="ctl00$ContentPlaceHolder$btn_savecategory" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder$btn_savecategory&quot;, &quot;&quot;, true, &quot;addCat&quot;, &quot;&quot;, false, false))" id="ctl00_ContentPlaceHolder_btn_savecategory" />
                        &nbsp;
                        <input type="submit" name="ctl00$ContentPlaceHolder$btn_cancel2" value="Cancel" id="ctl00_ContentPlaceHolder_btn_cancel2" />
                    </td>
                </tr>
            </table>
        
</div>
        
        <div id="ctl00_ContentPlaceHolder_pnl_atts" class="popupControl" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ContentPlaceHolder_btn_saveAtt')">
	
            <table>
                <tr>
                    <td>
                        -- Attributes --
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="ctl00_ContentPlaceHolder_lbl_attname">Att Name:</span>
                    </td>
                    <td>
                        <input name="ctl00$ContentPlaceHolder$txt_attname" type="text" value="Attribute" maxlength="250" readonly="readonly" id="ctl00_ContentPlaceHolder_txt_attname" style="background-color:inactivecaption;width:100px;padding-right:50px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="ctl00_ContentPlaceHolder_txt_attname">Attribute Name:</span>
                    </td>
                    <td>
                        <input name="ctl00$ContentPlaceHolder$txt_attname" type="text" maxlength="250" id="ctl00_ContentPlaceHolder_ctl00_ContentPlaceHolder_txt_attname" style="width:100px;padding-right:50px" />
                        <span id="ctl00_ContentPlaceHolder_RequiredFieldValidator2" style="color:Red;visibility:hidden;">Required</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input type="submit" name="ctl00$ContentPlaceHolder$btn_saveAtts" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder$btn_saveAtts&quot;, &quot;&quot;, true, &quot;addAtts&quot;, &quot;&quot;, false, false))" id="ctl00_ContentPlaceHolder_btn_saveAtts" />
                        &nbsp;
                        <input type="submit" name="ctl00$ContentPlaceHolder$btn_cancel3" value="Cancel" id="ctl00_ContentPlaceHolder_btn_cancel3" />
                    </td>
                </tr>
            </table>
        
</div>
        
 
    <div id="ctl00_ContentPlaceHolder_Panel2" class="skin0" display="none" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" style="border-color:Black;">
	
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><span id="ctl00_ContentPlaceHolder_btn_addCategory" class="menuitems" style="display:inline-block;width:90px;">Add Category</span></a></div>
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><span id="ctl00_ContentPlaceHolder_btn_addAtts" class="menuitems" style="display:inline-block;width:90px;">Add Att</span></a></div>
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><a id="ctl00_ContentPlaceHolder_btn_edit" class="menuitems" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$btn_edit','')" style="display:inline-block;width:90px;">Edit</a></a></div>
        <div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><a onclick="return confirm('Are you sure you want to delete this element?');" id="ctl00_ContentPlaceHolder_btn_deleteme" class="menuitems" href="javascript:__doPostBack('ctl00$ContentPlaceHolder$btn_deleteme','')" style="display:inline-block;width:90px;">Delete</a></a></div>
    
</div>
    
<script type="text/javascript"> 
//<![CDATA[
var ctl00_ContentPlaceHolder_treeviewAdmin_ImageArray =  new Array('', '', '', '../noexpand.gif', '..~/plus.gif', '../minus.gif', '../i.gif', '../r.gif', '../rplus.gif', '../rminus.gif', '../t.gif', '../tplus.gif', '../tminus.gif', '../l.gif', '../lplus.gif', '../lminus.gif', '../dash.gif', '../dashplus.gif', '../dashminus.gif');
var Page_Validators =  new Array(document.getElementById("ctl00_ContentPlaceHolder_RequiredFieldValidator1"), document.getElementById("ctl00_ContentPlaceHolder_RequiredFieldValidator2"));
//]]>
</script>
 
<script type="text/javascript"> 
//<![CDATA[
var ctl00_ContentPlaceHolder_RequiredFieldValidator1 = document.all ? document.all["ctl00_ContentPlaceHolder_RequiredFieldValidator1"] : document.getElementById("ctl00_ContentPlaceHolder_RequiredFieldValidator1");
ctl00_ContentPlaceHolder_RequiredFieldValidator1.controltovalidate = "ctl00_ContentPlaceHolder_txt_catAttName";
ctl00_ContentPlaceHolder_RequiredFieldValidator1.focusOnError = "t";
ctl00_ContentPlaceHolder_RequiredFieldValidator1.errormessage = "Required";
ctl00_ContentPlaceHolder_RequiredFieldValidator1.validationGroup = "addCat";
ctl00_ContentPlaceHolder_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_ContentPlaceHolder_RequiredFieldValidator1.initialvalue = "";
var ctl00_ContentPlaceHolder_RequiredFieldValidator2 = document.all ? document.all["ctl00_ContentPlaceHolder_RequiredFieldValidator2"] : document.getElementById("ctl00_ContentPlaceHolder_RequiredFieldValidator2");
ctl00_ContentPlaceHolder_RequiredFieldValidator2.controltovalidate = "ctl00_ContentPlaceHolder_txt_attname";
ctl00_ContentPlaceHolder_RequiredFieldValidator2.focusOnError = "t";
ctl00_ContentPlaceHolder_RequiredFieldValidator2.errormessage = "Required";
ctl00_ContentPlaceHolder_RequiredFieldValidator2.validationGroup = "addAtt";
ctl00_ContentPlaceHolder_RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_ContentPlaceHolder_RequiredFieldValidator2.initialvalue = "";
//]]>
</script>
 
 
<script type="text/javascript"> 
//<![CDATA[
(function() {var fn = function() {$get("ctl00_ContentPlaceHolder_ToolkitScriptManager1_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();
WebForm_InitCallback();var ctl00_ContentPlaceHolder_treeviewAdmin_Data = new Object();
ctl00_ContentPlaceHolder_treeviewAdmin_Data.images = ctl00_ContentPlaceHolder_treeviewAdmin_ImageArray;
ctl00_ContentPlaceHolder_treeviewAdmin_Data.collapseToolTip = "Collapse {0}";
ctl00_ContentPlaceHolder_treeviewAdmin_Data.expandToolTip = "Expand {0}";
ctl00_ContentPlaceHolder_treeviewAdmin_Data.expandState = theForm.elements['ctl00_ContentPlaceHolder_treeviewAdmin_ExpandState'];
ctl00_ContentPlaceHolder_treeviewAdmin_Data.selectedNodeID = theForm.elements['ctl00_ContentPlaceHolder_treeviewAdmin_SelectedNode'];
ctl00_ContentPlaceHolder_treeviewAdmin_Data.hoverClass = 'ctl00_ContentPlaceHolder_treeviewAdmin_8';
ctl00_ContentPlaceHolder_treeviewAdmin_Data.hoverHyperLinkClass = 'ctl00_ContentPlaceHolder_treeviewAdmin_7';
for (var i=0;i<19;i++) {
var preLoad = new Image();
if (ctl00_ContentPlaceHolder_treeviewAdmin_ImageArray[i].length > 0)
preLoad.src = ctl00_ContentPlaceHolder_treeviewAdmin_ImageArray[i];
}
ctl00_ContentPlaceHolder_treeviewAdmin_Data.lastIndex = 9;
ctl00_ContentPlaceHolder_treeviewAdmin_Data.populateLog = theForm.elements['ctl00_ContentPlaceHolder_treeviewAdmin_PopulateLog'];
ctl00_ContentPlaceHolder_treeviewAdmin_Data.treeViewID = 'ctl00$ContentPlaceHolder$treeviewAdmin';
ctl00_ContentPlaceHolder_treeviewAdmin_Data.name = 'ctl00_ContentPlaceHolder_treeviewAdmin_Data';
 
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}
 
function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        Sys.Application.initialize();
 
document.getElementById('ctl00_ContentPlaceHolder_RequiredFieldValidator1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ctl00_ContentPlaceHolder_RequiredFieldValidator1'));
}
 
document.getElementById('ctl00_ContentPlaceHolder_RequiredFieldValidator2').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ctl00_ContentPlaceHolder_RequiredFieldValidator2'));
}
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.PopupControlBehavior, {"CommitProperty":"foreColor","OffsetX":3,"PopupControlID":"ctl00_ContentPlaceHolder_pnl_add_category","Position":4,"dynamicServicePath":"/user/Treeview.aspx","id":"pce"}, null, null, $get("ctl00_ContentPlaceHolder_btn_addCategory"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.PopupControlBehavior, {"CommitProperty":"foreColor","OffsetX":3,"PopupControlID":"ctl00_ContentPlaceHolder_pnl_atts","Position":4,"dynamicServicePath":"/user/Treeview.aspx","id":"pce2"}, null, null, $get("ctl00_ContentPlaceHolder_btn_addAtt"));
});
//]]>
</script>
</form>
   	<script src="scripts/xtreeview.js" type="text/javascript"></script>
 
    </td>
  </tr>
  <tr><td>
    <div id="ctl00_framesPanel">
 
</div>
  </td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 33698716
Ermm. Sorry. Not possible to debug this unless you just produce a simple page with your issue. The page you pasted does not work at all due to excessive number of javascripts not available.
Here is an example I tried in Fx and IE8

<script>
var dom = document.getElementById;
var selected_tree, menuobj;
window.onload=function() {
  if (dom) {
    menuobj= document.getElementById("ctl00_ContentPlaceHolder_Panel2");
//    treeviewobj=document.getElementById("ctl00_ContentPlaceHolder_treeviewAdmin");
  }
}    

function showmenuie5(e)
{
    //Find out how close the mouse is to the corner of the window
    var rightedge  = e?window.innerWidth-e.clientX:document.body.clientWidth-event.clientX;
    var bottomedge = e?window.innerHeight-e.clientY: document.body.clientHeight-event.clientY;
    selected_tree = event.srcElement.firstChild;
    menuobj.style.visibility="visible"
}

function hidemenuie5() {}
function jumptoie5(e)
{
    //find the selected node from the treeview
    var firingobj=window.event?window.event.srcElement:e.target; // NOTE IE8 NOW HAVE "e" here too!!!
    if (firingobj.className=="menuitems"||e&&firingobj.parentNode.className=="menuitems")
    {
        if (e&&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 (dom)
    {
    menuobj.style.display=''
    document.onclick=hidemenuie5
    }
}    

</script>
<div class="menuitems"><a href="#" oncontextmenu="jumptoie5(event); return false"><label ID="btn_addCategory" CssClass="menuitems" Width="90">Add Category</label></a></div>
<div style="display:none" id="ctl00_ContentPlaceHolder_Panel2">Hello</div>

Open in new window

0
 

Author Comment

by:Baxta
ID: 33702121
Thanks that worked! Sorry for my code, it is a big project and i actually removed a lot of stuff from it that I did not want to be displayed to public. However, thanks so much for your time and your solution helped a lot! All problems fixed :)

Cheers
0
 

Author Closing Comment

by:Baxta
ID: 33702127
Thanks again.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now