Context Menus on the TReeView - IE Specific

  • Article

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>

Comments

  • Anonymous
    April 24, 2012
    I can't believe how simple this solution is, worked first time, excellent work !

  • Anonymous
    September 20, 2012
    hey gracias por tu post me ha servido bastante

  • Anonymous
    October 03, 2012
    Thank you so much for your post. Excellent :)