Solved

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

Posted on 2007-04-01
3
220 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: 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

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.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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