Solved

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

Posted on 2007-04-01
3
215 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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

14 Experts available now in Live!

Get 1:1 Help Now