How to develop two jqgrids on the same page with same context menu for both the grids?

Question

I have two jqgrids on a single page. And those two are supposed to have context menus. It is possible if I have two different context menus, say 'myMenu1' and 'myMenu2'. But I would like to have only one context menu and i want to use it for both the grids and I actually took reference from the link from oleg. Please suggest how can i achieve??

<div class="contextMenu" id="myMenu1" style="display:none">
         <ul style="width: 200px">
        <li id="edit">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Edit Row</span>
        </li>
        <li id="del">
            <span class="ui-icon ui-icon-trash" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Delete Row</span>
        </li>
        </ul>
       </div>

And the binding i am doing is like the below.

loadComplete: function() {
                      $("tr.jqgrow", this).contextMenu('myMenu1', {
                          bindings: {
                              'edit': function(trigger) {
                                if (trigger.id && trigger.id !== lastSelection) {
                                      grid_location.restoreRow(lastSelection);
                                      grid_location.editRow(trigger.id, true);
                                lastSelection = trigger.id;
                                     }

                              },
                              'del': function(trigger) {
                          if ($('#del').hasClass('ui-state-disabled') === false) {
                                      // disabled item can do be choosed
                                      if (trigger.id && trigger.id !== lastSelection) {
                                          grid_location.restoreRow(lastSelection);
                                        //grid.editRow(trigger.id, true);
                                        //lastSelection = trigger.id;
                                             }
                                      grid_location.delGridRow(trigger.id, delSettings);
                                  }
                              }
                          },
                          onContextMenu: function(event/*, menu*/) {
                              var rowId = $(event.target).closest("tr.jqgrow").attr("id");
                              //grid.setSelection(rowId);
                              return true;
                          }
                      });
                  }

@CrisimIlNumenoreano i am using jquery.contextmenu. Its the one that has come with jqgrid downloads(version 4.4.1). — venugopal, Oct 13 '12 at 03:32
I would like to request the jqgrid gurus like @oleg to help me as this question is very important for my project and i am an ardent follower of your jqgrid examples. — venugopal, Oct 13 '12 at 03:59
@CrisimIlNumenoreano The below answer is very useful Crisim, But I did not use this direclty rather it gave me an idea where was i doing mistake. I will come back with the modified and working code on tomorrow .. Thank you Crisim. — venugopal, Oct 14 '12 at 16:37

score 0 · Answer 1 · 2012-10-14T12:19:11.833

0

I think that $(event.target).closest("table") is the reference to the current jqgrid, if there are no subgrids of course.

edited Oct 14 '12 at 12:19

answered Oct 13 '12 at 20:51

score 0 · Answer 2 · edited Oct 16 '12 at 11:42

0

I solved this for local data, and I am posting the entire code over here. The only concern is that for the date picker is not picking the date if the columns of type date in the two grids have same names( or indexes). So for that I have used different names(inv_date and invdate) but in the case of server side data i am still confused.

onContextMenu: function(event/*, menu*/) {
    /*
      In this line we will be specifying on which grid the context menu has to perform
      and this variable 'grid' has to be used in the 'onclickSubmitLocal' function.
    */
    grid = $("#currnt_grid");
    var rowId = $(event.target).closest("tr.jqgrow").attr("id");
    return true;
}

edited Oct 16 '12 at 11:42

WarrenFaith

57,492
25
134
150

answered Oct 15 '12 at 14:00

venugopal

427
6
13

in your code you still reference myMenu2, even if it's not present. – Oct 16 '12 at 09:11
@CrisimIlNumenoreano Pardon me, its a typo..please check now. – venugopal Oct 16 '12 at 11:08
@WarrenFaith In the entire code , the important part is , the variable 'grid' and setting it in the 'onContextMenu' event to the current grid on which the context menu is being opened ,because the variable 'grid' is being used in the 'onclickSubmitLocal' function to represent the current grid. And to function properly the rowid should be unique for every row across all the grids. – venugopal Oct 16 '12 at 11:17
So how about reducing it to this important part? Nobody, really nobody will take a serious look into this mass of code. – WarrenFaith Oct 16 '12 at 11:19
@WarrenFaith forgive me,, i am new to stackoverflow...But trying to learn things over here. – venugopal Oct 16 '12 at 11:34
no problem, thats why I commented instead of flagging :) Keep going and enjoy it :) – WarrenFaith Oct 16 '12 at 11:43

How to develop two jqgrids on the same page with same context menu for both the grids?

2 Answers2