Context Menu in ASP.NET

We normally face a task like to show Menu when we right click the gridview or treeview e.t.c.

Many third party controls are providing this right click context Menu to the controls like one of the best third party control like Telerik.

But we can do this type of requirements using jQuery also.

To do this in ASP.NET we need to download the jQuery Context Menu plugin.

We need frame the menu div based on our requirement.See this example to do
<div>
    <ul id="myMenu" class="contextMenu">
      <li class="edit"><a href="#edit">Edit Node</a> </li>
      <li class="delete"><a href="#delete">Delete Node</a> </li>
    </ul>
  </div>


* This source code was highlighted with Source Code Highlighter.
After downloading the plugin you need to add this lines in your .aspx page

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


* This source code was highlighted with Source Code Highlighter.
You can customize the "jquery.contextMenu.css" file according to our requirement.




Here I have taken a tree view control and binded th two data tables as the data source .Please see the below code


         
protected void Page_Load(object sender, EventArgs e)
    {
      if (!IsPostBack)
      {

        //Can call From Database also
        DataTable dt = RootNodes();
        TreeNode headnode = new TreeNode();
        headnode.Text = "Head Node";
        tv1.Nodes.Add(headnode);
        //Loop for binding Parent Values
        for (int i = 0; i < dt.Rows.Count; i++)
        {
          TreeNode firstchild = new TreeNode();
          firstchild.Text = dt.Rows[i][1].ToString();
          headnode.ChildNodes.Add(firstchild);
          //Can call from Database on the basis of value of firstchild
          //Here you can pass argument.
          DataTable dt1 = ChildNodes();
          //Loop for binding Child Values.
          for (int j = 0; j < dt1.Rows.Count; j++)
          {
            TreeNode childnode = new TreeNode();
            childnode.Text = dt1.Rows[j][1].ToString();
            firstchild.ChildNodes.Add(childnode);
            //more over can expand the list.
          }
        }
      }
    }
    public DataTable RootNodes()
    {
      DataTable dt = new DataTable("Root");
      dt.Columns.Add("RootId", typeof(int));
      dt.Columns.Add("RootDesc", typeof(String));
      DataRow dr = dt.NewRow();
      dr[0] = "10";
      dr[1] = "Root Node One";
      dt.Rows.Add(dr);
      DataRow dr1 = dt.NewRow();
      dr1[0] = "20";
      dr1[1] = "Root Node Two";
      dt.Rows.Add(dr1);
      return dt;
    }
    public DataTable ChildNodes()
    {
      DataTable dt = new DataTable("Child");
      dt.Columns.Add("ChildId", typeof(int));
      dt.Columns.Add("ChildDesc", typeof(string));
      DataRow dr = dt.NewRow();
      dr[0] = "10";
      dr[1] = "Child Node One";
      dt.Rows.Add(dr);
      DataRow dr1 = dt.NewRow();
      dr1[0] = "20";
      dr1[1] = "Child Node Two";
      dt.Rows.Add(dr1);
      return dt;
    }

* This source code was highlighted with Source Code Highlighter.

Now we need to invoke the jQuery Context Menu when we right click on any tree view node.See the below logic to invoke using jQuery
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  <script src="jquery.contextMenu-1.01/jquery.contextMenu.js" type="text/javascript"></script>
  <link href="jquery.contextMenu-1.01/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    $(document).ready(function () {
      $('#divTV a[class$=tv1_0]').contextMenu({ menu: "myMenu" },
                 function (action, el, pos) {
                   alert(
                        "Action: " + action + "\n\n" +
                          "Element ID: " + $(el).attr("id") + "\n\n" +
                            "X: " + pos.x + " Y:" + pos.y + " (relative to element)\n\n" +
                                "X: " + pos.docX + "Y: " + pos.docY + " (relative to document)"
                      );
                   switch (action) {
                     case "edit":
                       alert("You have clicked Edit ! ");
                       break;
                     case "delete":
                       alert("You have clicked Delete ! ");
                       break;
                     default:
                       break;

                   }
                 })

    });
  </script>


* This source code was highlighted with Source Code Highlighter.

The output is show in the below


 When we click on any Menu Item we will get the Item Details like the Client ID ,Position,Value  e.t.c. See the below Image too

Any Suggestions regarding this article are welcome :-)

Popular posts from this blog

Exporting to excel from a custom class object using C#.NET

How to hide bootStrap popover when user click(s) outside the popover?

Get the Clicked Cell Value and Column Name of GridView in ASP.NET