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..8d514433 100644 --- a/js/src/qgrid.widget.js +++ b/js/src/qgrid.widget.js @@ -401,6 +401,31 @@ class QgridView extends widgets.DOMWidgetView { ); this.grid_elem.data('slickgrid', this.slick_grid); + if (this.grid_options.context_menu){ + 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); + 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, + 'row_index': data_item.row_index, + column + }) + }); + } + if (this.grid_options.forceFitColumns){ this.grid_elem.addClass('force-fit-columns'); } @@ -789,6 +814,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.index, msg.column, msg.items) } } @@ -802,6 +829,36 @@ class QgridView extends widgets.DOMWidgetView { } } + show_context_menu (x,y, index, column, items) { + if (!this.context_elem) { + this.context_elem = $(`