Context Menus on the TReeView - IE Specific

Context Menus on the TReeView - IE Specific

  • Comments 3

A few ASP.NET 2.0 TreeView coders were asking for a how to have context menus - per node - on the TreeView control. Well I spent a small amount of time on this and wanted to post one solution. A few caveats:

a. IE Specific
b. I never optimized the javascript to use parameters

Hope this helps soeone achieve what they need. If you find a better solution please feel free to let me know!

 

 

<%@ Page Language="C#" %>

<html>
<
head>
    <style>
    <!--
        .skin1 {
            
cursor:default;
            
font:menutext;
            
position:absolute;
            
text-align:left;
            
font-family: Arial, Helvetica, sans-serif;
            
font-size: 10pt;
            
width:120px;
            
background-color:menu;
            
border:1 solid buttonface;
            
visibility:hidden;
            
border:2 outset buttonhighlight;
        }
        
.menuitems {
            
padding-left:15px;
            
padding-right:10px;
    }
    
-->
    </style>

    <script type="text/javascript">

<!-- Begin
var menuskin = "skin1";
var display_url = 1; // Show URLs in status bar?
function showmenuie5() {
    
if (event.srcElement.type != undefined)
    {
            
var s  = event.srcElement.id;
            
var ind = s.replace("TreeView1t", "");
            s = s.replace(
"TreeView1t", "TreeView1n");

            document.getElementById(
'one').url = event.srcElement.href;
            document.getElementById(
'one').innerText = "Select";
            
var ch = document.getElementById(s);
            
if (ch != null){
                document.getElementById(
'two').url = "javascript:TreeView_ToggleNode(TreeView1_Data," + ind + "," + s + ",' '," + s + "Nodes)";    
                document.getElementById(
'two').innerText = "Expand\\Collapse";
            }
            
else        
                document.getElementById(
'two').outerHTML="<div id=two class=menuitems url=''></div>"


            var rightedge = document.body.clientWidth-event.clientX;
            
var bottomedge = document.body.clientHeight-event.clientY;
            
if (rightedge < ie5menu.offsetWidth)
                ie5menu.style.left = document.body.scrollLeft +
event.clientX - ie5menu.offsetWidth;
            
else
                ie5menu.style.left = document.body.scrollLeft + event.clientX;
            
if (bottomedge < ie5menu.offsetHeight)
                ie5menu.style.top = document.body.scrollTop +
event.clientY - ie5menu.offsetHeight;
            
else
                ie5menu.style.top = document.body.scrollTop + event.clientY;
                ie5menu.style.visibility =
"visible";
                }
                
else
                {
                   ie5menu.style.visibility =
"hidden";
                }
            
return false;
    }
    
function hidemenuie5() {
        ie5menu.style.visibility =
"hidden";
    }
    
function highlightie5() {
        
if (event.srcElement.className == "menuitems") {
            
event.srcElement.style.backgroundColor = "highlight";
            
event.srcElement.style.color = "white";
        
if (display_url)
            window.status =
event.srcElement.url;
        }
    }
    
function lowlightie5() {
        
if (event.srcElement.className == "menuitems") {
            
event.srcElement.style.backgroundColor = "";
            
event.srcElement.style.color = "black";
            window.status =
"";
        }
    }
    
function jumptoie5() {
        
if (event.srcElement.className == "menuitems") {
            
if (event.srcElement.getAttribute("target") != null)
                window.open(
event.srcElement.url, event.srcElement.getAttribute("target"));
            
else
                window.location = event.srcElement.url;
        }
    }
//  End -->
    </script>

</
head>
<
body>
    <form id="form1" runat="server">
        <div id="ie5menu" class="skin0" onmouseover="highlightie5()" onmouseout="lowlightie5()"
            onclick="jumptoie5();">
            <div id="one" class="menuitems" url="">
            </div>
            <div id="two" class="menuitems" url="">
            </div>
        </div>
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="a" Value="a">
                    <asp:TreeNode Text="b" Value="b">
                        <asp:TreeNode Text="c" Value="c"></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="cc" Value="cc">
                    <asp:TreeNode Text="ccc" Value="ccc">
                        <asp:TreeNode Text="cccc" Value="cccc"></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
            <SelectedNodeStyle BackColor="#C00000" />
        </asp:TreeView>
    </form>

    <script type="text/javascript">
      if
(document.all) {
          ie5menu.className = menuskin;
          document.getElementById(
'TreeView1').oncontextmenu = showmenuie5;
          document.body.onclick = hidemenuie5;
      }
    
</script>
</
body>
</
html>
Leave a Comment
  • Please add 2 and 8 and type the answer here:
  • Post
  • I can't believe how simple this solution is, worked first time, excellent work !

  • hey gracias por tu post me ha servido bastante

  • Thank you so much for your post. Excellent :)

Page 1 of 1 (3 items)