Solved

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

Posted on 2007-04-01
3
214 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
Comment Utility
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
Comment Utility
<$.02>Don't forget to "unattach" the event handlers (to prevent memory leaks)</$.02>
0
 

Author Comment

by:sonaku2003
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to dynamically set the form action using jQuery.
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now