From 19d9ab077ad9aae53d62825623fc5eac994ed176 Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Sat, 29 Jun 2019 15:13:57 +0300
Subject: [PATCH 1/7] Display a context menu on right click Menu items are
 defined in grid_options

---
 js/src/qgrid.css       | 22 ++++++++++++++++++++++
 js/src/qgrid.widget.js | 27 +++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/js/src/qgrid.css b/js/src/qgrid.css
index a0553074..414980c2 100644
--- a/js/src/qgrid.css
+++ b/js/src/qgrid.css
@@ -429,6 +429,28 @@
   border-left: 1px solid #cccccc;
 }
 
+/* Context menu */
+
+.q-grid-container #contextMenu {
+  background: rgb(245, 245, 245);
+  border: 1px solid gray;
+  padding: 2px;
+  display: inline-block;
+  min-width: 100px;
+  -moz-box-shadow: 2px 2px 2px silver;
+  -webkit-box-shadow: 2px 2px 2px silver;
+  z-index: 99999;
+}
+
+.q-grid-container #contextMenu li {
+  padding: 4px 4px 4px 14px;
+  list-style: none;
+}
+
+.q-grid-container #contextMenu li:hover {
+  background-color: #cccccc;
+}
+
 /* Filter dropdowns */
 
 .q-grid-container .grid-filter {
diff --git a/js/src/qgrid.widget.js b/js/src/qgrid.widget.js
index 9cfe94df..c2eec094 100644
--- a/js/src/qgrid.widget.js
+++ b/js/src/qgrid.widget.js
@@ -401,6 +401,33 @@ class QgridView extends widgets.DOMWidgetView {
     );
     this.grid_elem.data('slickgrid', this.slick_grid);
 
+    if (this.grid_options.context_menu){
+      if (!this.context_elem) {
+        this.context_elem = $(`<ul id='contextMenu' style='display:none;position:absolute'</ul>`).appendTo(this.$el);
+        this.grid_options.context_menu.forEach(o => {$(`<li>${o}</li>`).appendTo(this.context_elem)});
+      }
+    }
+    
+    this.slick_grid.onContextMenu.subscribe((e) => {
+      
+      //calculate x,y position for the context menu
+      e.preventDefault();
+      var bounds = this.$el[0].getBoundingClientRect();
+      var x = e.pageX - bounds.left;
+      var y = e.pageY - bounds.top;
+
+      var cell = this.slick_grid.getCellFromEvent(e);
+
+      this.context_elem
+          .data("cell", cell)
+          .css("top", y)
+          .css("left", x)
+          .show();
+      $("body").one("click", () => {
+        this.context_elem.hide();
+      });
+    });
+
     if (this.grid_options.forceFitColumns){
       this.grid_elem.addClass('force-fit-columns');
     }

From e2b911689122aaaf21b143c1e72d8226dadce3a5 Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Sat, 29 Jun 2019 20:56:13 +0300
Subject: [PATCH 2/7] Allow user to dynamically generate the context menu
 items.

---
 js/src/qgrid.widget.js | 57 +++++++++++++++++++++++++-----------------
 qgrid/grid.py          | 35 +++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/js/src/qgrid.widget.js b/js/src/qgrid.widget.js
index c2eec094..bc7e71e6 100644
--- a/js/src/qgrid.widget.js
+++ b/js/src/qgrid.widget.js
@@ -402,31 +402,23 @@ class QgridView extends widgets.DOMWidgetView {
     this.grid_elem.data('slickgrid', this.slick_grid);
 
     if (this.grid_options.context_menu){
-      if (!this.context_elem) {
-        this.context_elem = $(`<ul id='contextMenu' style='display:none;position:absolute'</ul>`).appendTo(this.$el);
-        this.grid_options.context_menu.forEach(o => {$(`<li>${o}</li>`).appendTo(this.context_elem)});
-      }
-    }
-    
-    this.slick_grid.onContextMenu.subscribe((e) => {
+      this.slick_grid.onContextMenu.subscribe((e) => {
       
-      //calculate x,y position for the context menu
-      e.preventDefault();
-      var bounds = this.$el[0].getBoundingClientRect();
-      var x = e.pageX - bounds.left;
-      var y = e.pageY - bounds.top;
-
-      var cell = this.slick_grid.getCellFromEvent(e);
-
-      this.context_elem
-          .data("cell", cell)
-          .css("top", y)
-          .css("left", x)
-          .show();
-      $("body").one("click", () => {
-        this.context_elem.hide();
+        //calculate x,y position for the context menu
+        e.preventDefault();
+        var bounds = this.$el[0].getBoundingClientRect();
+        var x = e.pageX - bounds.left;
+        var y = e.pageY - bounds.top;
+  
+        var cell = this.slick_grid.getCellFromEvent(e);
+        this.send({
+          type: 'show_context_menu',
+          x,
+          y,
+          cell
+        })
       });
-    });
+    }
 
     if (this.grid_options.forceFitColumns){
       this.grid_elem.addClass('force-fit-columns');
@@ -816,6 +808,8 @@ class QgridView extends widgets.DOMWidgetView {
     } else if (msg.col_info) {
       var filter = this.filters[msg.col_info.name];
       filter.handle_msg(msg);
+    } else if (msg.type == 'show_context_menu'){
+      this.show_context_menu(msg.x, msg.y, msg.cell, msg.items)
     }
   }
 
@@ -829,6 +823,23 @@ class QgridView extends widgets.DOMWidgetView {
     }
   }
 
+  show_context_menu (x,y,cell, items) {
+    if (!this.context_elem) {
+      this.context_elem = $(`<ul id='contextMenu' style='display:none;position:absolute'</ul>`).appendTo(this.$el);
+    }
+    this.context_elem.empty();
+    items.forEach(o => {$(`<li>${o}</li>`).appendTo(this.context_elem)});
+
+    this.context_elem
+        .data("cell", cell)
+        .css("top", y)
+        .css("left", x)
+        .show();
+    $("body").one("click", () => {
+      this.context_elem.hide();
+    });
+  }
+
   /**
    * Update the size of the dataframe.
    */
diff --git a/qgrid/grid.py b/qgrid/grid.py
index b0e76dde..68c8ce09 100644
--- a/qgrid/grid.py
+++ b/qgrid/grid.py
@@ -325,7 +325,8 @@ def show_grid(data_frame,
               grid_options=None,
               column_options=None,
               column_definitions=None,
-              row_edit_callback=None):
+              row_edit_callback=None,
+              context_menu = None):
     """
     Renders a DataFrame or Series as an interactive qgrid, represented by
     an instance of the ``QgridWidget`` class.  The ``QgridWidget`` instance
@@ -377,7 +378,20 @@ def show_grid(data_frame,
         particular row's values, keyed by column name. The callback should
         return True if the provided row should be editable, and False
         otherwise.
-
+    context_menu : dict
+        A dict contains two callables to be used for handling the context menu.
+        Items in the context menu are dynamically generated based on the cell.
+         
+        ``
+        context_menu = {
+            'items_callback' : ... callable(cell)
+            'click_callback' : ... callable(cell, item)
+        }
+        ``
+        the ``items_callback`` takes a ``cell`` which is a dict of ``row`` and 
+        ``cell`` IDs, and returns a list of items (strings) to be shown in the 
+        context menu. The ``click_callback`` takes ``cell`` and an ``item`` 
+        from that was clicked from the context menu. 
 
     Notes
     -----
@@ -487,6 +501,10 @@ def show_grid(data_frame,
         options = defaults.grid_options.copy()
         options.update(grid_options)
         grid_options = options
+
+    if context_menu:
+        grid_options['context_menu'] = True
+
     if not isinstance(grid_options, dict):
         raise TypeError(
             "grid_options must be dict, not %s" % type(grid_options)
@@ -508,7 +526,8 @@ def show_grid(data_frame,
                        column_options=column_options,
                        column_definitions=column_definitions,
                        row_edit_callback=row_edit_callback,
-                       show_toolbar=show_toolbar)
+                       show_toolbar=show_toolbar,
+                       context_menu=context_menu)
 
 
 PAGE_SIZE = 100
@@ -607,6 +626,7 @@ class can be constructed directly but that's not recommended because
     column_options = Dict({})
     column_definitions = Dict({})
     row_edit_callback = Instance(FunctionType, sync=False, allow_none=True)
+    context_menu = Dict({})
     show_toolbar = Bool(False, sync=True)
     id = Unicode(sync=True)
 
@@ -1549,6 +1569,15 @@ def _handle_qgrid_msg_helper(self, content):
                 'name': 'filter_changed',
                 'column': content['field']
             })
+        elif content['type'] == 'show_context_menu':
+            x, y, cell = content['x'], content['y'], content['cell']
+            items = self.context_menu['items_callback'](cell)
+            self.send({
+                'type': 'show_context_menu',
+                'x': x,
+                'y': y,
+                'items': items
+            })
 
     def _notify_listeners(self, event):
         # notify listeners at the module level

From 9f47f242bfc221879efbe7c147efcb8605961f3f Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Sun, 30 Jun 2019 14:26:12 +0300
Subject: [PATCH 3/7] Fix server response to include cell address for the
 context menu

---
 qgrid/grid.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/qgrid/grid.py b/qgrid/grid.py
index 68c8ce09..6e5fca78 100644
--- a/qgrid/grid.py
+++ b/qgrid/grid.py
@@ -1576,6 +1576,7 @@ def _handle_qgrid_msg_helper(self, content):
                 'type': 'show_context_menu',
                 'x': x,
                 'y': y,
+                'cell':cell,
                 'items': items
             })
 

From 062f86275f3116d13abbe28ac64add9d83649b0f Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Sun, 30 Jun 2019 19:35:08 +0300
Subject: [PATCH 4/7] Implement context menu item click clallback

---
 js/src/qgrid.widget.js | 11 +++++++++++
 qgrid/grid.py          |  3 +++
 2 files changed, 14 insertions(+)

diff --git a/js/src/qgrid.widget.js b/js/src/qgrid.widget.js
index bc7e71e6..c896b345 100644
--- a/js/src/qgrid.widget.js
+++ b/js/src/qgrid.widget.js
@@ -835,6 +835,17 @@ class QgridView extends widgets.DOMWidgetView {
         .css("top", y)
         .css("left", x)
         .show();
+
+    this.context_elem.find('li').one("click", e => {
+      var cell = this.context_elem.data("cell");
+      var item = $(e.target).text()
+      this.send({
+        'type': 'context_menu_item_clicked',
+        item,
+        cell
+      })
+    });
+
     $("body").one("click", () => {
       this.context_elem.hide();
     });
diff --git a/qgrid/grid.py b/qgrid/grid.py
index 6e5fca78..de0350d9 100644
--- a/qgrid/grid.py
+++ b/qgrid/grid.py
@@ -1579,6 +1579,9 @@ def _handle_qgrid_msg_helper(self, content):
                 'cell':cell,
                 'items': items
             })
+        elif content['type'] == 'context_menu_item_clicked':
+            cell, item = content['cell'], content['item']
+            self.context_menu['click_callback'](cell, item)
 
     def _notify_listeners(self, event):
         # notify listeners at the module level

From f208477ee36f5c95cc8d6a6c48567dc261dae042 Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Sun, 30 Jun 2019 20:04:53 +0300
Subject: [PATCH 5/7] Skip the context menu if no items returned

---
 qgrid/grid.py | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/qgrid/grid.py b/qgrid/grid.py
index de0350d9..3690b942 100644
--- a/qgrid/grid.py
+++ b/qgrid/grid.py
@@ -504,6 +504,8 @@ def show_grid(data_frame,
 
     if context_menu:
         grid_options['context_menu'] = True
+    else:
+        context_menu = {}
 
     if not isinstance(grid_options, dict):
         raise TypeError(
@@ -1572,13 +1574,14 @@ def _handle_qgrid_msg_helper(self, content):
         elif content['type'] == 'show_context_menu':
             x, y, cell = content['x'], content['y'], content['cell']
             items = self.context_menu['items_callback'](cell)
-            self.send({
-                'type': 'show_context_menu',
-                'x': x,
-                'y': y,
-                'cell':cell,
-                'items': items
-            })
+            if items and isinstance(items, list):
+                self.send({
+                    'type': 'show_context_menu',
+                    'x': x,
+                    'y': y,
+                    'cell':cell,
+                    'items': items
+                })
         elif content['type'] == 'context_menu_item_clicked':
             cell, item = content['cell'], content['item']
             self.context_menu['click_callback'](cell, item)

From c6ab5a478673ab8b71616a0061e7581462e2ce6d Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Wed, 3 Jul 2019 11:28:48 +0300
Subject: [PATCH 6/7] Change context menu items to key-value

---
 js/src/qgrid.widget.js |  6 +++---
 qgrid/grid.py          | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/js/src/qgrid.widget.js b/js/src/qgrid.widget.js
index c896b345..539bfbbb 100644
--- a/js/src/qgrid.widget.js
+++ b/js/src/qgrid.widget.js
@@ -828,7 +828,7 @@ class QgridView extends widgets.DOMWidgetView {
       this.context_elem = $(`<ul id='contextMenu' style='display:none;position:absolute'</ul>`).appendTo(this.$el);
     }
     this.context_elem.empty();
-    items.forEach(o => {$(`<li>${o}</li>`).appendTo(this.context_elem)});
+    $.each(items, (k,v) => {$(`<li key=${k}>${v}</li>`).appendTo(this.context_elem)});
 
     this.context_elem
         .data("cell", cell)
@@ -838,10 +838,10 @@ class QgridView extends widgets.DOMWidgetView {
 
     this.context_elem.find('li').one("click", e => {
       var cell = this.context_elem.data("cell");
-      var item = $(e.target).text()
+      var key = $(e.target).attr('key')
       this.send({
         'type': 'context_menu_item_clicked',
-        item,
+        key,
         cell
       })
     });
diff --git a/qgrid/grid.py b/qgrid/grid.py
index 3690b942..9d97a12d 100644
--- a/qgrid/grid.py
+++ b/qgrid/grid.py
@@ -385,13 +385,13 @@ def show_grid(data_frame,
         ``
         context_menu = {
             'items_callback' : ... callable(cell)
-            'click_callback' : ... callable(cell, item)
+            'click_callback' : ... callable(cell, key)
         }
         ``
         the ``items_callback`` takes a ``cell`` which is a dict of ``row`` and 
-        ``cell`` IDs, and returns a list of items (strings) to be shown in the 
-        context menu. The ``click_callback`` takes ``cell`` and an ``item`` 
-        from that was clicked from the context menu. 
+        ``cell`` IDs, and returns a dictionary of key-value strings to be shown in the 
+        context menu. The ``click_callback`` takes a ``cell`` and a ``key`` 
+        that was clicked from the context menu. 
 
     Notes
     -----
@@ -1574,7 +1574,7 @@ def _handle_qgrid_msg_helper(self, content):
         elif content['type'] == 'show_context_menu':
             x, y, cell = content['x'], content['y'], content['cell']
             items = self.context_menu['items_callback'](cell)
-            if items and isinstance(items, list):
+            if items and isinstance(items, dict):
                 self.send({
                     'type': 'show_context_menu',
                     'x': x,
@@ -1583,8 +1583,8 @@ def _handle_qgrid_msg_helper(self, content):
                     'items': items
                 })
         elif content['type'] == 'context_menu_item_clicked':
-            cell, item = content['cell'], content['item']
-            self.context_menu['click_callback'](cell, item)
+            cell, key = content['cell'], content['key']
+            self.context_menu['click_callback'](cell, key)
 
     def _notify_listeners(self, event):
         # notify listeners at the module level

From 553b2077a2288375588146176cfefc39dffe5202 Mon Sep 17 00:00:00 2001
From: Mashaal Musleh <meshalawy@gmail.com>
Date: Thu, 4 Jul 2019 17:34:01 +0300
Subject: [PATCH 7/7] Use index & column instead of cell This matches the
 conventions used in qgrid and avoid potential issues of index versus
 row_index.

---
 js/src/qgrid.widget.js | 20 ++++++++++++++------
 qgrid/grid.py          | 32 +++++++++++++++++++++-----------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/js/src/qgrid.widget.js b/js/src/qgrid.widget.js
index 539bfbbb..8d514433 100644
--- a/js/src/qgrid.widget.js
+++ b/js/src/qgrid.widget.js
@@ -411,11 +411,17 @@ class QgridView extends widgets.DOMWidgetView {
         var y = e.pageY - bounds.top;
   
         var cell = this.slick_grid.getCellFromEvent(e);
+        if (cell.cell<=0)
+          return;
+
+        var column = this.columns[cell.cell].name;
+        var data_item = this.slick_grid.getDataItem(cell.row);
         this.send({
           type: 'show_context_menu',
           x,
           y,
-          cell
+          'row_index': data_item.row_index,
+          column
         })
       });
     }
@@ -809,7 +815,7 @@ class QgridView extends widgets.DOMWidgetView {
       var filter = this.filters[msg.col_info.name];
       filter.handle_msg(msg);
     } else if (msg.type == 'show_context_menu'){
-      this.show_context_menu(msg.x, msg.y, msg.cell, msg.items)
+      this.show_context_menu(msg.x, msg.y, msg.index, msg.column, msg.items)
     }
   }
 
@@ -823,7 +829,7 @@ class QgridView extends widgets.DOMWidgetView {
     }
   }
 
-  show_context_menu (x,y,cell, items) {
+  show_context_menu (x,y, index, column, items) {
     if (!this.context_elem) {
       this.context_elem = $(`<ul id='contextMenu' style='display:none;position:absolute'</ul>`).appendTo(this.$el);
     }
@@ -831,18 +837,20 @@ class QgridView extends widgets.DOMWidgetView {
     $.each(items, (k,v) => {$(`<li key=${k}>${v}</li>`).appendTo(this.context_elem)});
 
     this.context_elem
-        .data("cell", cell)
+        .data({index, column})
         .css("top", y)
         .css("left", x)
         .show();
 
     this.context_elem.find('li').one("click", e => {
-      var cell = this.context_elem.data("cell");
+      var index = this.context_elem.data("index");
+      var column = this.context_elem.data("column");
       var key = $(e.target).attr('key')
       this.send({
         'type': 'context_menu_item_clicked',
         key,
-        cell
+        index,
+        column
       })
     });
 
diff --git a/qgrid/grid.py b/qgrid/grid.py
index 9d97a12d..aeebd79e 100644
--- a/qgrid/grid.py
+++ b/qgrid/grid.py
@@ -384,14 +384,22 @@ def show_grid(data_frame,
          
         ``
         context_menu = {
-            'items_callback' : ... callable(cell)
-            'click_callback' : ... callable(cell, key)
+            'items_callback' : ... callable(index, column)
+            'click_callback' : ... callable(index, column, key)
         }
         ``
-        the ``items_callback`` takes a ``cell`` which is a dict of ``row`` and 
-        ``cell`` IDs, and returns a dictionary of key-value strings to be shown in the 
-        context menu. The ``click_callback`` takes a ``cell`` and a ``key`` 
-        that was clicked from the context menu. 
+        
+        The ``items_callback`` takes the follwoing parameters:
+            * **index** The index of the row that contains the clicked cell.
+            * **column** The name of the column that contains the clicked cell.
+        
+        And it returns a dictionary of key-value strings to be shown in the 
+        context menu. 
+
+        Then ``click_callback`` takes one more parameter in addition to the 
+        previous parameters: 
+            * **key** The key of the context menu item that was clicked.
+
 
     Notes
     -----
@@ -1572,19 +1580,21 @@ def _handle_qgrid_msg_helper(self, content):
                 'column': content['field']
             })
         elif content['type'] == 'show_context_menu':
-            x, y, cell = content['x'], content['y'], content['cell']
-            items = self.context_menu['items_callback'](cell)
+            x, y, row_index, column = content['x'], content['y'], content['row_index'], content['column']
+            index = self._df.index[row_index]
+            items = self.context_menu['items_callback'](index, column)
             if items and isinstance(items, dict):
                 self.send({
                     'type': 'show_context_menu',
                     'x': x,
                     'y': y,
-                    'cell':cell,
+                    'index': index,
+                    'column': column,
                     'items': items
                 })
         elif content['type'] == 'context_menu_item_clicked':
-            cell, key = content['cell'], content['key']
-            self.context_menu['click_callback'](cell, key)
+            index, column, key = content['index'], content['column'], content['key']
+            self.context_menu['click_callback'](index, column, key)
 
     def _notify_listeners(self, event):
         # notify listeners at the module level