context menu problem - V2 | datagrid, gridview, jquery grid examples, javascript ui

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>

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.

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

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?

yes - call setCurrentRow(row) before the raiseevent

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!

context menu problem - V2

Forum search