• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

How to create a context menu based on the row selection in JavaScript

I am having some difficulties in creating a contextmenu in Javascript..
I need a context menu to be displayed based on the row selection in a grid.. Some rows have defaultt values that need to be displayed and some dont...
So I need a javascript that iterate through all the rows selected and then take their values and display the context menu accordingly...

Can anyone help me in this regard?
1 Solution
Check this out:

      <title>Script Demo Gops</title>
            <script language="JavaScript">
                  var mozilla=document.getElementById && !document.all
                  var ie=document.all

                  if (mozilla){
                        document.addEventListener("contextmenu", displaymenu, true)
                        document.addEventListener("click", hidemenu, true)
                  }else if (ie){
                        document.attachEvent("oncontextmenu", displaymenu)
                        document.attachEvent("onclick", hidemenu)

                  function iebody(){
                        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

                  function displaymenu(e){
                        var target=window.event?window.event.srcElement:e.target;
                        var str="";
                        for(var i=0;i<target.cells.length;i++){
                              str+="For Row "+(target.rowIndex+1)+ " Column " +(i+1)+" :"+ (target.cells[i].childNodes[0].nodeValue)+"<br>";
                        if (mozilla){
                              return false
                        }else if (ie){
                              return false

                  function hidemenu(){
                        if (typeof el!="undefined" && contextisvisible){

<div id="context_menu" style="width:350px;border:1px solid black;background-color:#EEEEEE;font-size:xx-small;visibility:hidden;position:absolute;padding-left: 10px">
<table cellpadding="2" cellspacing="1" border="1" width="500" style="font-family:verdana;font-size:xx-small;">
            <td>And perhaps the most eloquent stat that sums up play in the first part of the</td>
            <td>And in that score, Sanath Jayasuriya who, on the day, equaled Sachin Tendulkar</td>
            <td>Ajaybhai Patel is a worried man. His son's standard XII board examinations begin on March 25 </td>
            <td>That is the first surprise -- the fact that a family is more interested in allowing Parthiv to relax instead of taxing him.</td>
<$.02>Don't forget to "unattach" the event handlers (to prevent memory leaks)</$.02>
sonaku2003Author Commented:
Thanks for your reply

Your approach works fine... But I need something like this.... I have a grid, each and every row in it has some hidden values that are to be displayed in the context menu...

For instance Row1 has "print, cut, copy"
                     Row2 has "open,download"
Upon the selection of rows, javascript has to iterate through all the selected rows , and take those values and create a context menu dynamically..  Sometimes user may select mutple rows too...

Can you help me in this...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now