Solved

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

Posted on 2007-04-01
3
218 Views
Last Modified: 2013-11-19
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?
0
Comment
Question by:sonaku2003
3 Comments
 
LVL 17

Accepted Solution

by:
gops1 earned 500 total points
ID: 18832989
Check this out:

<html>
      <title>Script Demo Gops</title>
      <head>
            <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;
                        while(target.tagName!='TR'){
                              target=target.parentNode;
                        }
                        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>";
                        }
                        document.getElementById('context_menu').innerHTML=str;
                        el=document.getElementById("context_menu")
                        contextisvisible=1
                        if (mozilla){
                              el.style.left=pageXOffset+e.clientX+"px"
                              el.style.top=pageYOffset+e.clientY+"px"
                              el.style.visibility="visible"
                              e.preventDefault()
                              return false
                        }else if (ie){
                              el.style.left=iebody().scrollLeft+event.clientX
                              el.style.top=iebody().scrollTop+event.clientY
                              el.style.visibility="visible"
                              return false
                        }
                  }

                  function hidemenu(){
                        if (typeof el!="undefined" && contextisvisible){
                              el.style.visibility="hidden"
                              contextisvisible=0
                        }
                  }

            </script>
      </head>
<body>
<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">
</div>
<table cellpadding="2" cellspacing="1" border="1" width="500" style="font-family:verdana;font-size:xx-small;">
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
</table>
</body>
</html>
0
 
LVL 29

Expert Comment

by:Badotz
ID: 18835017
<$.02>Don't forget to "unattach" the event handlers (to prevent memory leaks)</$.02>
0
 

Author Comment

by:sonaku2003
ID: 18836557
Gosp1,
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...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question