context menu problem - V2

I'm having problems that when the context menu is triggered and you have a row selected that is off your current view, your view resets to where your selected row is before it shows the context menu. I tried resetting the selected row but to no avail. Currently, if you load this code and either have no row selected or select a row and then scroll away from it, then you right click with no selected row on the screen, the view will reset to the top (if nothing selected) or to the previously selected row.

Any ideas?

<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;
        }
  </style>

  <script>
    var headers = [ 
                     "header 1",
                     "header 2",
                     "header 3",
                     "header 4",
                     "header 5",
                     "header 6",
                     "header 7",
                     "header 8",
                     "header 9",
                     "header 10",
                     "header 11",
                     "header 12",
                     "header 13",
                     "header 14",
                   ];

    var table = new AW.Grid.Extended;
    table.setId('myGrid');
    table.setStyle('height', 300);                                                           
    table.setStyle('width', '90%');                                                          
    table.setColumnCount(12);                                                                
    table.setColumnIndices([0,13,1,3,5,6,4,2,7,8,9,10]);        
    table.setHeaderText(headers);                                                            
    table.setCellText(function(i, j){return j + "-" + i});                                   
    table.setVirtualMode(true);                                                              
                                                                                             
    table.setSelectorText(function(i){return this.getRowPosition(i)+1});                     
    table.setSelectorVisible(true);                                                          
    table.setSelectorResizable(true);                                                        
    table.setHeaderHeight(20);                                                               
    table.setSelectorWidth(25);                                                              
    table.setRowCount(200);                                                                  
                                                                                             
    table.setCellEditable(false); // disable editing                                         
    table.setSelectionMode("multi-row");                                                     
                                                                                             
    table.getCellTemplate().setEvent("oncontextmenu", raiseMenuEvent);                       
                                                                                             
    function raiseMenuEvent(event){                                                          
      this.raiseEvent("onCellContextMenu", event, this.\$0,this.\$1);                        
    }                                                                                        
                                                                                             
    var contextmenu = new AW.HTML.DIV;                                                       
    contextmenu.setId('contextmenu');                                                        
    document.write(contextmenu);                                                             
                                                                                             
    table.onCellContextMenu = function(event, col, row){                                     
      contextmenu.element().innerHTML = "Right Click Menu";                                  
      table.setSelectedRows([row]);                                                          
      contextmenu.setStyle('left', event.clientX + "px");                                    
      contextmenu.setStyle('top', event.clientY + "px");                                     
      contextmenu.setStyle("visibility", "visible");                                         
    }                                                                                        
                                                                                             
    document.onclick = function() { contextmenu.setStyle("visibility", "hidden"); };         
    document.write(table);                                                                   
  </script>                                                                                  
</body>                                                                                      
</html>

Mike

September 25,

you could set the current row to the right clicked row before showing the menu. shouldn't that solve the problem? I also avoided the context menu since I found some issues with it. instead I just created a DIV layer and positioned it at the absolute position of the event x and y. the div then has a onmouseleave event tied to it to hide it.

Joel

September 25,

just realized - the onmouseleave might not work outside of IE. not an issue for me but...

Joel

September 25,

I tried the following but I still get the same problem:

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

I'm not sure where to stick the row select to make it happen before the event.

Ideas?

Mike

September 26,

yes - call setCurrentRow(row) before the raiseevent

Joel

September 26,

Well, the setCurrentRow still moves the grid but it does at least keep me in the correct area of the list. I think this is still a bug and should be considered as to how to handle it in a better fashion. It looks to me to be a simple problem of operations not being in a good order when it comes to the event, selecting rows, etc.

Atm it appears to do:
event->move->select
should be:
event->select->move

It works like that for left click, but for right it seems backwards.

Thanks for the help!

Mike

September 28,

This topic is archived.

context menu problem - V2

See also:

Search

New Data Grid

Version 2