2

I am having difficulties adding a context menu to my jqGrid within the onRightClick event. After right clicking on a cell I would like to get the rowid, iRow, and iCol values from the onRightClickRow event.

However, the problem that I am experiencing is that the first time I right click on a cell in the grid the context menu does not appear. The second time that I right click on a cell the context menu is displayed, but the rowid, iRow, and iCol values are all for the first cell that was right clicked. So the rowid, iRow, and iCol never match up with the cell that is right clicked.

For the context menu I am using jquery.contextmenu.r2.js

Here is the jqGrid code that I have.

jQuery("#list").jqGrid({
    url:urlPath,
    datatype:"json",
    mtype:'GET',
    jsonReader: {
        root: function (obj) { return obj.result; },
        id: dataID,
        repeatitems: false,
        page:  function(obj) { return 1; },
        total: function(obj) { return 1; },
        records: function(obj) { return obj.result.length; }        
    },
    colNames: columnNames,
    colModel: columnModel,
    onRightClickRow: function (rowid, iRow, iCol, e) {
        jQuery("#list").contextMenu('rightClickMenu', {
            bindings: {
                'DisplayiRow': function(t) {
                    alert('DisplayiRow: ' + iRow);   
                },
                'DisplayiCol': function(t) {
                    alert('DisplayiCol: ' + iRow);
                }
            }
        })
    },
    scroll:1,
    headertitles: true,
    pager: '#pager',
    shrinkToFit: false,
    autowidth: true,
    height: gridHeight,
    sortable: true,
    sortorder: 'desc',
    viewsortcols:[true,'vertical', true],
    viewrecords: true,
    gridview: true,
    loadonce: true
  });
  jQuery("#list").jqGrid('filterToolbar', {searchOnEnter:false,defaultSearch:'cn'});
});

HTML is

<div class="contextMenu" id="rightClickMenu" style="display:none">
    <ul>
       <li id="DisplayiRow">
           DisplayiRow</li>
       <li id="DisplayiCol">
           DisplayiCol</li>
   </ul>
</div>

Is there a way to add in a right click Context menu to the onRightClickRow event so that I can get the rowid, iRow, and iCol values of the cell that was clicked?

Abe
  • 21
  • 1
  • 1
  • 2

1 Answers1

4

Look at the old answer which contain the demo. I hope it will help to solve your problem. I am sure that binding of contextMenu inside of loadComplete is not the only solution of the problem, but it works very good.

Moreover, I recommend you to use context menu plugin from the plugins subdirectory of the jqGrid source. It's the version which is tested with jqGrid and I see no sense to use another one.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for the help. I've looked at the post that you referenced, it is a bit helpful but I'm not sure it will allow me to get the iRow and iCol values along with the rowid that onRightClickRow returns. I'm not sure if I have to add the context menu to each cell by going down the row and then adding the menu with find("td").eq(ColunmNumber) – Abe Nov 11 '11 at 09:35
  • @Abe: I wrote you before that what I suggest is not the only implementation. I don't understand why you need `iRow` and `iCol` values. The value of `iRow` you can get as `rowIndex` property of DOM element which corresponds chosen row: `$("#" + trigger.id)[0].rowIndex`. Do you need to have different contexmenus for different cells in the row? – Oleg Nov 11 '11 at 10:30
  • @Abe: Moreover inside of `onContextMenu` handler you can examine `event.target`. It's DOM of `` element. You can get `iCol` as `$.jgrid.getCellIndex(event.target)`. – Oleg Nov 11 '11 at 10:37
  • Hi Oleg, sorry I was not clearer, but yes I am trying to get different context menus for different cells in the row. Based on the row/column location I was going to change the options that are displayed in the context menu. I will try your suggestion of examining the event.target handler within onContextMenu. – Abe Nov 11 '11 at 19:03
  • @Oleg thanks for your reply: is it difficult to create a context menu in JqSuite for PHP ? – Jess Stone Dec 17 '13 at 11:35
  • 1
    @JessStone: I don't use JqSuite myself, but it should use *the same open source JavaScript product jqGrid*. So the creating of context menu should work in the same way. I use myself dynamical context menu close to the method described in [the answer](http://stackoverflow.com/a/8491939/315935). In the way I first add buttons to the navigator bar and then create context menu based on the buttons of the navigator bar. So the user don't need scroll to the top or to the bottom to edit, delete etc. – Oleg Dec 17 '13 at 12:03