How can I make Context Menu ?

Hi Alex,

Your work is realy great, even when I need something I can hopefuly find a solution here. But there is one little thing for me to be done, but I do not now exactly how...

I am (IMHO) experienced WWW programmer/designer, using almost daily not only HTML, but PHP, SQL, and JavaScript too. But I am quite new in DHTML. So I would appreciate any clue from you or anyone here.

What I am trying to do:

I use your great Grid in my SQL Intranet application (for my own use - or maybe later for my clients too... hopefuly). The grid is used to navigate through records and fills form cells to make any updates. Background is done via PHP script called from within an <IFRAME>. (I have to make sorting based on SQL too, because I had problems with JavaScript sorting extended characres (as I wrote in http://www.activewidgets.com/messages/1788-14.htm). I would like to faster at last some operations to not use SQL background for those tasks. So...

I would like to implement .my_context_menu for headers and for rows (with a little diferecies) perhaps working like a hybrid of tooltip and a DHTML menu with dynamicaly created links (something like in excel or so) for:

- filtering for set value
- filtering to match selected value
- filtering for other then selected value
- set sort order (for 1 or more columns - will still use SQL)

and so on...

Do you havge a plan to implement it in version 2.0 or can you at last give mi a hint where to start ?

PS: Keep working... It is realy great and perhaps one day it becomes unexceptionable.

I used the menu from

//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

you need to wire it into the grid

//set the action to handle the contextmenu
    function oncontextmenu(event)
    {
        event.cancelBubble = true;
        event.returnValue = false;
        this.action("contextmenu");
    }
   // assign the event handler to the cell template prototype
    Active.Templates.Text.prototype.setEvent("oncontextmenu", oncontextmenu);
    
    // create action handler for the right click context menu
    grid.setAction("contextmenu", function(src){ showmenu(event,getMenuHeader()+menu);return false;});

should get you there. you'll need to figure out the context menu code.
but the snippets above were all the changes required to make the grid show the context on the grid.

i'm still trying to figure out getting a context menu on the headers without triggering a sort! i'm baffled on that one.

I have a problem and a question:

The problem is that the context menu is shown on the upper left corner of the window (in the place where the menu's div is typed).

The question is: how do I get the row index from within the

// create action handler for the right click context menu
grid.setAction("contextmenu", function(src){ showmenu(event,getMenuHeader()+menu);return false;});

call? (I need to include a different menu, depending on the row clicked).

Thanks.

did you ever get your context menu working.

I'm looking into adding a right-click menu to allow the user to select Delete item, rename item

any example would be great.

hi
Avi here
I want make scroll in html filr please gide me

simple!!

SELECT use_user as User, use_Email as Email, use_Address as Address FROM users

Hi ASJ,

See http://open-modeling.sourceforge.net/reference/addcontextmenu.htm

We extended the grid using inheritance principles. If you are interested I can try to give your details how you can make it work when not using open-modeling.

and message

http://www.activewidgets.com/javascript.forum.6305.3/adding-record.html

I try out onclick event

obj.setEvent('click', function(){showmenu(event, menu);});

but it does not work. Any ideas?

Hi,

Did anyone ever made the context menu working?

I think many of us are looking forward to use it and expand its functionality.

thanks.

Hi,

Yes we did oncontextmenu working like the contextmenu in explorer.
See http://open-modeling.dyndns.org/openmodeling215b.
Navigate to to the modelbrowser select process and a grid will appear. Now you see the contextmenu using right click.

John

Here is my take on a context menu:

The CSS

div.contextmenu {
          background-color: #d0d0d0;
          border: 2px solid;
          border-color: #f0f0f0 #909090 #909090 #f0f0f0;
          left: 0px;
          padding: 0px 1px 1px 0px;
          position: absolute;
          top: 0px;
          visibility: hidden;
          z-index: 600;
        }

        div.contextmenu a.menuItem {
          color: #000000;
          cursor: default;
          display: block;
          padding: 3px 1em;
          text-decoration: none;
          white-space: nowrap;
        }

        div.contextmenu a.menuItem:hover, div.menu a.menuItemHighlight {
          background-color: #000080;
          color: #ffffff;
        }

        div.contextmenu div.menuItemSep {
          border-top: 1px solid #909090;
          border-bottom: 1px solid #f0f0f0;
          margin: 4px 2px;
        }

Then add this to your AW script

// set contextmenu action handler
var row = new Active.Templates.Row;
row.setEvent("oncontextmenu", function(){this.action("contextmenu")});
obj.setAction("contextmenu", function(src){
    obj.setProperty("selection/index",src.getProperty("item/index"));
        writeContextMenu(myData[src.getProperty("item/index")]['0']);
        showContextMenu(event);
}
);

function initContextMenu() {
        document.write('<div id="contextmenu" class="contextmenu"></div>');
}

function writeContextMenu(itemId) {
        var contextMenu = document.getElementById("contextmenu");
        contextMenu.innerHTML  = '<a class="menuItem" href="?action=edit&id=' + itemId + '"><strong>Edit</strong></a>';
        contextMenu.innerHTML += '<a class="menuItem" href="?action=clone&id=' + itemId + '">Clone</a>';
        contextMenu.innerHTML += '<div class="menuItemSep"></div>';
        contextMenu.innerHTML += '<a class="menuItem" href="?action=remove&id=' + itemId + '">Remove</a>';
}

function showContextMenu(e) {
        document.getElementById("contextmenu").style.left = e.clientX + "px";
        document.getElementById("contextmenu").style.top = e.clientY + "px";
        document.getElementById("contextmenu").style.visibility = "visible";
}

function hideContextMenu() {
        document.getElementById("contextmenu").style.visibility = "hidden";
}

initContextMenu();
document.onclick = hideContextMenu;

A slight change to the showContextMenu function. To keep it from popping up outside the page...

function showContextMenu(e) {
        var contextMenu = document.getElementById("contextmenu");

        if ((window.innerWidth - e.clientX) < contextMenu.offsetWidth) {
            contextMenu.style.left = (window.pageXOffset + e.clientX - contextMenu.offsetWidth) + "px";
        } else {
            contextMenu.style.left = e.clientX + "px";
        }

        if ((window.innerHeight - e.clientY) < contextMenu.offsetHeight) {
            contextMenu.style.top = (window.pageYOffset + e.clientY - menuobj.offsetHeight) + "px";
        } else {
            contextMenu.style.top = e.clientY + "px";
        }

        contextMenu.style.visibility = "visible";
    }

hi,

i copied your code in my script, however the grid doesnt show. but if i take out your code from the script, the grid shows and is working fine.. i dont reely know exactly where to place your code.. below is my code.. please take a look of it.. tnx! :)

$html = "<"."script".">\n";
$html .= $columns;
$html .= $rows;
$html .= "try {\n";
$html .= " var $name = new Active.Controls.Grid;\n";
$html .= " $name.setRowCount($row_count);\n";
$html .= " $name.setColumnCount($column_count);\n";
$html .= " $name.setDataText(function(i, j){return ".$name."_data[i][j]});\n";
$html .= " $name.setColumnText(function(i){return ".$name."_columns[i]});\n";
$html .= " $name.setColumnValues([1,2,3]);\n";
$html .= " obj.setAction('click', function(src){ ";
$html .= " window.status=src.getProperty('data/text', 0) } );\n";

// set contextmenu action handler ..
// YOUR cODE! :)
$html .= " var row = new Active.Templates.Row; \n";
$html .= " row.setEvent('oncontextmenu', function(){this.action('contextmenu')}); \n";
$html .= " obj.setAction('contextmenu', function(src){ \n";
$html .= " obj.setProperty('selection/index',src.getProperty('item/index')); \n";
$html .= " writeContextMenu(myData[src.getProperty('item/index')]['0']); \n";
$html .= " showContextMenu(event); \n";
$html .= " } \n";
$html .= " ); \n";
$html .= " function initContextMenu() { \n";
$html .= " document.write('<div id='contextmenu' class='contextmenu'></div>'); \n";
$html .= " } \n";
$html .= " function writeContextMenu(itemId) { \n";
$html .= " var contextMenu = document.getElementById('contextmenu'); \n";
$html .= " contextMenu.innerHTML = '<a class='menuItem' href='?action=edit&id=' + itemId + ' '><strong>Edit</strong></a>'; \n";
$html .= " contextMenu.innerHTML += '<a class='menuItem' href='?action=clone&id=' + itemId + ' '>Clone</a>'; \n";
$html .= " contextMenu.innerHTML += '<div class='menuItemSep'></div>'; \n";
$html .= " contextMenu.innerHTML += '<a class='menuItem' href='?action=remove&id=' + itemId + ' '>Remove</a>'; \n";
$html .= " } \n";
$html .= " function showContextMenu(e) { \n";
$html .= " var contextMenu = document.getElementById('contextmenu'); \n";
$html .= " if ((window.innerWidth - e.clientX) < contextMenu.offsetWidth) { \n";
$html .= " contextMenu.style.left = (window.pageXOffset + e.clientX - contextMenu.offsetWidth) + 'px'; \n";
$html .= " } else { \n";
$html .= " contextMenu.style.left = e.clientX + 'px'; \n";
$html .= " } \n";
$html .= " if ((window.innerHeight - e.clientY) < contextMenu.offsetHeight) { \n";
$html .= " contextMenu.style.top = (window.pageYOffset + e.clientY - menuobj.offsetHeight) + 'px'; \n";
$html .= " } else { \n";
$html .= " contextMenu.style.top = e.clientY + 'px'; \n";
$html .= " } \n";
$html .= " contextMenu.style.visibility = 'visible'; \n";
$html .= " } \n";
$html .= " function hideContextMenu() { \n";
$html .= " document.getElementById('contextmenu').style.visibility = 'hidden'; \n";
$html .= " } \n";
$html .= " initContextMenu(); \n";
$html .= " document.onclick = hideContextMenu; \n";


$html .= " document.write($name);\n";
$html .= "}\n";
$html .= "catch (error){\n";
$html .= " document.write(error.description);\n";
$html .= "}\n";

$html .= "</"."script".">\n";
echo $html;

this code is written in php.. i need your help asap.. tnx again! :)

hi again.. can you also post a sample code for this.. a code which would run if tested so i can have a better look at it.. thanks again..

i editted my code and i realized i was only having trouble of the singe and double quotations i used.. it is now working fine. thnxz anyway. job well done neil! :)

to neil,

the context mnu is working well, however for each option in the context menu, when clicked, will open its target page only in the ifame where the grid was placed.. i want the target page to open in the same window where the page with the grid in the frame is.. i tried adding <base target="_top"> before the <a href="....>.... but stil it opens in the ifame.. pls help.. thnx!

If I understand correctly, your grid is inside an iframe and you want to redirect the parent of the iframe.

Try using the target="_parent" instead. The alternative is to have the link call a Javascript function that will determine the parent of the iframe (window.opener or the parent reference will work here).

Hi Neil Craig
Can you post a complete working example. i can't make it work with your code snippet. The row context menu doesn't appears when i right click on a selected row.
Thank you

mail
xuov@eclips-software.com

Does any one has worked out to create context menus on AW new version 2.0.1

V2.0.1 context menu

<html>
<head>
  <script src="/ActiveWidgets/runtime/lib/aw.js"></script>
  <link href="/ActiveWidgets/runtime/styles/aqua/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
        #contextmenu {
          background-color: #c0c0c0;
          border: 2px solid;
          border-color: #f0f0f0 #909090 #909090 #f0f0f0;
          left: 0px;
          padding: 3px 3px 3px 3px;
          position: absolute;
          top: 0px;
          visibility: hidden;
          z-index: 600;
        }

        #contextmenu a.menuItem {
          color: #000000;
          cursor: default;
          display: block;
          padding: 3px 1em;
          text-decoration: none;
          white-space: nowrap;
        }

        #contextmenu a.menuItem:hover, div.menu a.menuItemHighlight {
          background-color: #000080;
          color: #ffffff;                                                                    
        }                                                                                    
                                                                                             
        #contextmenu div.menuItemSep {                                                       
          border-top: 1px solid #909090;                                                     
          border-bottom: 1px solid #f0f0f0;                                                  
          margin: 4px 2px;                                                                   
        }
</style>
<script>
  var grid1 = new AW.UI.Grid;
  grid1.setId("grid1");
  grid1.setCellText("cell");
  grid1.setHeaderText("header");
  grid1.setColumnCount(5);
  grid1.setRowCount(10);

  function get_height() {
    var y = 5;
    if (self.innerHeight) // all except Explorer
      y = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
      y = document.documentElement.clientHeight;
    else if (document.body) // other Explorers
      y = document.body.clientHeight;
    return y;
  }

  // assign html event handler to row template
  grid1.getCellTemplate().setEvent("oncontextmenu", function () {
    var col = this.$0; 
    var row = this.$1; 
    grid1.setSelectedRows([row]); 
    grid1.setCurrentRow(row);
    this.raiseEvent("onCellContextMenu", event, row, col);
  });

  var contextmenu = new AW.HTML.DIV;
  contextmenu.setId('contextmenu');
  document.write(contextmenu);
    
  grid1.onCellContextMenu = function(event, col, row){
    var menu;
    menu  = 'Incident #: <strong>' + grid1.getCellValue(0,row) + '</strong>';
    menu += '<div class="menuItemSep"></div>';
    menu += '<a class="menuItem" href=\\'javascript: alert("AW Is Fun!");\\'>Active Widgets</a>';
    contextmenu.element().innerHTML = menu;                                                  
                                                                                             
    var h = get_height();                                                                    
    var menu_size = '280';                                                                   
                                                                                             
    contextmenu.setStyle('left', event.clientX + "px");                                      
    if (event.clientY > h - menu_size)                                                       
      contextmenu.setStyle('top', (h - menu_size) + "px");                                   
    else                                                                                     
      contextmenu.setStyle('top', event.clientY + "px");                                     
                                                                                             
    contextmenu.setStyle("visibility", "visible");                                           
  }                                                                                          
                                                                                             
  document.onclick = function() {                                                            
    contextmenu.setStyle("visibility", "hidden");                                            
  };                                                         

  document.write(grid1);
</script>
</body>
</html>

Awesome Mike ... just a quick question. How would I set this to only pop up the menu on a specific column? Meaning, how do I assign this function to, say, only to happen when the person right-clicks in the first column of the grid?

For me, the first column displays a "description", but the other columns display numerical data. I'd only want the pop-up if they right-click on the description (which would be the first column).

Awesome example however ... I look forward to implementing it.

i am deleting one row from the grid with contextmenu using AJAX,and the next row am highlighting.but again when i click on the delete key the row is not deleteing and navigation keys also not working. because next row setEvent is not set.(Any ideas?)

plz help me i have urgent work.

Carl, sorry for the slow response...I never checked this thread...

Here is your answer:

Change the following code as noted:

grid1.getCellTemplate().setEvent("oncontextmenu", function () { 
    var col = this.$0;  
    var row = this.$1;  

    if (col != 0) { return false; } // <b>set this value to whatever column you want to display the menu</b>

    grid1.setSelectedRows([row]);  
    grid1.setCurrentRow(row); 

    this.raiseEvent("onCellContextMenu", event, row, col); 
  });