Click here to Skip to main content
15,444,571 members
Articles / Web Development / ASP.NET
Posted 27 Apr 2009


39 bookmarked

Create a jQuery Context Menu for Treeview

Rate me:
Please Sign up or sign in to vote.
4.63/5 (14 votes)
27 Apr 2009CPOL2 min read
jQuery Context Menu for Treeview


I looked on the internet for a context menu for a TreeView in ASP.NET, which would work like the WindowsForm TreeView. I found one, but it only worked on Internet Explorer 6. So, I didn't feel like it was a viable solution for cross browser compatibility. So, I looked at for some plugins and found one written by Cory S.N. LaViska.




I wanted a context menu that worked with the ASP.NET TreeView, and provided the following:

  1. Cross Browser Compatible
  2. Easy to Implement
  3. Extendable enough to provide the ability to add functions to edit, delete, or add nodes to my TreeView

So, I looked at jQuery, which takes care of the cross browser compatibility. Then I found LaViska's context menu which is easy to implement, and provides the extendability I needed.

Using the Code

The code is simple. First I added the script tags to the page and the CSS file reference.

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />

Second, I created a TreeView control within a div as follows:

<div id="MyTreeDiv">
<asp:TreeView ID="MyTreeView" runat="server" ExpandDepth="0">
 <asp:TreeNode Text="node1" Value="f2571858-0eff-4260-9935-2f53d8e1bcd0">
   <asp:TreeNode Text="node10" Value="c1ddc0fc-c170-4a74-8de3-f1e85fdb2615">
     <asp:TreeNode Text="node100" Value="c2532e51-704f-45e9-abc7-f8a2a7b1f422" />
     <asp:TreeNode Text="node101" Value="d47ce54e-1c2b-45af-b767-e610f05e0960" />
     <asp:TreeNode Text="node102" Value="faa99883-4996-4ac4-afa1-a197df615a0b" />
     <asp:TreeNode Text="node103" Value="7c49a861-c253-49c4-86a5-9b1789187f80" />
     <asp:TreeNode Text="node104" Value="42def2d5-ae7a-4746-8223-63f762de058a" />
     <asp:TreeNode Text="node105" Value="ea0051a0-1122-432e-977b-46ef1e58f9c4" />
  <asp:TreeNode Text="node2" Value="bcb02fd7-d2fa-430a-b004-1d5f8e481a9f">
   <asp:TreeNode Text="node20" Value="42516600-21c3-4866-9d45-7e42e82997c4" />
   <asp:TreeNode Text="node21" Value="3802be53-69c7-4e45-85e6-863cabea238a" />
   <asp:TreeNode Text="node22" Value="e99019d4-243e-454d-a761-0b214a4bd893" />
   <asp:TreeNode Text="node23" Value="4cbc3de2-18c0-43da-b65d-493f9a84243e" />
   <asp:TreeNode Text="node24" Value="7a211df9-6ed5-4198-b5ab-665f39069541" />
   <asp:TreeNode Text="node25" Value="862dc876-8b92-437d-9947-833faea03ce4" />

I used GUIDs for the value. This makes it easier to pass the GUID to another function or page.

Third, I created my context menu and assigned it a class of type 'contextMenu'. This class allows the menu to be hidden until I need to call it up with the jQuery code provided by the jQuery context menu, which is as follows:

<ul id="myMenu" class="contextMenu">
    <li class="copy"><a href="#add">Add</a></li>
    <li class="edit"><a href="#edit">Edit</a></li> 
    <li class="delete"><a href="#delete">Delete</a></li>
    <li class="quit separator"><a href="#cancel">Cancel</a></li>

Next I added the following JavaScript code to the page:

<script type="text/javascript">
$(document).ready(function() {
$("#MyTreeDiv A").contextMenu({
menu: 'myMenu'
}, function(action, el, pos) {
'Action: ' + action + '\n\n' +
'Element text: ' + $(el).text() + '\n\n' + 
'GUID: ' + getGUID($(el).attr("href")) + '\n\n' + 
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' + 
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
); }); });

function getGUID(mystr) {
var reGUID = /\w{8}[-]\w{4}[-]\w{4}[-]\w{4}[-]\w{12}/g 
var retArr = [];
var retval = '';
retArr = mystr.match(reGUID);
if(retArr != null)
retval = retArr[retArr.length - 1];
return retval;

The first function assigns the context menu 'myMenu' to my div 'MyTreeDiv', which contains my TreeView. It basically takes all the <A> tags and adds the context menu to them.
The getGUID functions gets the GUIDs from the postback function. The GUID is used to let me know what node or item to work with. I can easily pass this to another function or page to edit, delete, or add a node to my tree.

Points of Interest

I was amazed at how simple it was to use jQuery to assign a context menu to the nodes of a Treeview. I actually am using this in an application that brings up a popup using the jQuery UI popup function for each node I right click on. jQuery makes things so much easier.


  • 27th April, 2009: Initial post 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer DBA Ron Carrigan
United States United States
I enjoy the challenges of programming. I graduated from Western Kentucky University with a B.S. with a major in Computer Science in 1995. I started ASP.NET programming in 2003 using VB.NET. Now, I do most of my programming in C#.

Comments and Discussions

Question22 Pin
itcabb10-Oct-16 5:11
professionalitcabb10-Oct-16 5:11 
GeneralMy vote of 3 Pin
Prasyee4-Oct-12 23:57
MemberPrasyee4-Oct-12 23:57 
Questionnot working in IE Pin
Member 849115427-Jun-12 1:55
MemberMember 849115427-Jun-12 1:55 
QuestionConnectivity with DB Pin
Mr. Batra9-Feb-11 9:41
MemberMr. Batra9-Feb-11 9:41 
GeneraljQuery 1.4.2 + this contextMenu = doesn't work Pin
jd310684-Nov-10 9:29
Memberjd310684-Nov-10 9:29 
GeneralRe: jQuery 1.4.2 + this contextMenu = doesn't work Pin
jd310684-Nov-10 9:35
Memberjd310684-Nov-10 9:35 
GeneralRe: jQuery 1.4.2 + this contextMenu = doesn't work Pin
Ronald G. Carrigan27-Feb-12 3:30
MemberRonald G. Carrigan27-Feb-12 3:30 
GeneralRe: jQuery 1.4.2 + this contextMenu = doesn't work Pin
jd3106827-Feb-12 3:51
Memberjd3106827-Feb-12 3:51 
GeneralMy vote of 5 Pin
diloyer27-Oct-10 8:50
Memberdiloyer27-Oct-10 8:50 
GeneralDatabase Pin
eirikr5-Oct-10 9:48
Membereirikr5-Oct-10 9:48 
GeneralUseful information Pin
WesMcGJr22-Sep-10 6:36
MemberWesMcGJr22-Sep-10 6:36 
GeneralMy vote of 5 Pin
koolprasad200320-Aug-10 0:05
professionalkoolprasad200320-Aug-10 0:05 
GeneralGood article Pin
Donsw13-Jun-10 8:17
MemberDonsw13-Jun-10 8:17 
Generalvalue property of node in jquery Pin
prashu44427-Oct-09 1:28
Memberprashu44427-Oct-09 1:28 
QuestionHow to disable contextMenu add button in Child nodes Pin
Member 400474830-Sep-09 19:18
MemberMember 400474830-Sep-09 19:18 
GeneralInformative Article Pin
adatapost27-Apr-09 17:14
Memberadatapost27-Apr-09 17:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.