Convert from jqgrid to free-jqgrid, now no context menu

Question

I'm converting from jqgrid (4.6.0) to free-jqgrid (4.14.1). Everything seems to work, but I'm not getting my context menu when I right-click on the grid (the toolbar search button still works). Is there an additional import or something I need? Here's what I'm currently bringing in:

jqueryui/1.12.1/themes/smoothness/jquery-ui.css
free-jqgrid/4.14.1/css/ui.jqgrid.css
free-jqgrid/4.14.1/plugins/css/ui.multiselect.css
jquery/3.2.1/jquery.min.js
jqueryui/1.12.1/jquery-ui.min.js
free-jqgrid/4.14.1/plugins/min/ui.multiselect.js
free-jqgrid/4.14.1/i18n/grid.locale-en.js
free-jqgrid/4.14.1/jquery.jqgrid.min.js
free-jqgrid/4.14.1/plugins/jquery.contextmenu.js

TIA

Edit:

grid.contextMenu(menuId, {
    bindings : myBinding,
    onContextMenu : function(e) {
        var p = grid[0].p,
            i,
            lastSelId,
            $target = $(e.target),
            rowId = $target.closest("tr.jqgrow").attr("id"),
            isInput = $target.is(':text:enabled') || $target.is('input[type=textarea]:enabled') || $target.is('textarea:enabled');
        if (rowId && !isInput && jqGridGetSelectedText() === '') {
            i = $.inArray(rowId, p.selarrrow);
            if (p.selrow !== rowId && i < 0) {
                // prevent the row from be unselected
                // the implementation is for "multiselect:false" which we use,
                // but one can easy modify the code for "multiselect:true"
                grid.jqGrid('setSelection', rowId);
            } else if (p.multiselect) {
                // Edit will edit FIRST selected row.
                // rowId is allready selected, but can be not the last selected.
                // Se we swap rowId with the first element of the array p.selarrrow
                lastSelId = p.selarrrow[p.selarrrow.length - 1];
                if (i !== p.selarrrow.length - 1) {
                    p.selarrrow[p.selarrrow.length - 1] = rowId;
                    p.selarrrow[i] = lastSelId;
                    p.selrow = rowId;
                }
            }
            return true;
        } else {
            return false;
            // no contex menu
        }
    },
    menuStyle : {
        backgroundColor : '#fcfdfd',
        border : '1px solid #a6c9e2',
        maxWidth : '600px',
        width : '100%'
    },
    itemHoverStyle : {
        border : '1px solid #79b7e7',
        color : '#1d5987',
        backgroundColor : '#d0e5f5'
    }
});

Edit: Demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" type="text/css" media="screen" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.contextmenu-ui.js"></script>

        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
        <title>jqGrid Loading Data - Million Rows from a REST service</title>
    </head>
    <body>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#jqGrid").jqGrid({
                    url : 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
                    mtype : "GET",
                    datatype : "jsonp",
                    colModel : [{
                        label : 'OrderID',
                        name : 'OrderID',
                        key : true,
                        width : 75
                    }, {
                        label : 'Customer ID',
                        name : 'CustomerID',
                        width : 150
                    }, {
                        label : 'Order Date',
                        name : 'OrderDate',
                        width : 150
                    }, {
                        label : 'Freight',
                        name : 'Freight',
                        width : 150
                    }, {
                        label : 'Ship Name',
                        name : 'ShipName',
                        width : 150
                    }],
                    viewrecords : true,
                    width : 780,
                    height : 250,
                    rowNum : 20,
                    pager : "#jqGridPager"
                }).jqGrid('navGrid', "#jqGridPager", {
                    add : true,
                    edit : true,
                    view : true,
                    del : true,
                    search : true,
                    refresh : true
                }).jqGrid("createContexMenuFromNavigatorButtons", $("#jqGrid").jqGrid("getGridParam", "pager"))
            });
        </script>

    </body>
</html>

One can create context menu in different ways. You need at least post the JavaScript code, which you use. It's difficult to help you if you don't post **the demo**, which reproduces the problem. Having JSFiddle demo, for example one could not only reproduce the problem, but fix the code to make it working. I personally use only `createContexMenuFromNavigatorButtons` from `plugins/jquery.createcontexmenufromnavigatorbuttons.js` with `plugins/jquery.contextmenu-ui`. — Oleg, Jul 21 '17 at 16:06
I (incorrectly) assumed this would be a common migration issue with an easy fix. Sorry — jtaylor___, Jul 21 '17 at 16:38
Could you prepare **the demo**, which reproduce the problem? Do you use `multiselect: true` or not, for example? The code, which you posted don't contain the definition of `jqGridGetSelectedText`, `myBinding` and `menuId` and the corresponding HTML fragment, which defines the menu div. And so on... You could use some combination of options, which could have some side effects. It could be that the usage of `singleSelectClickMode: "selectonly"` option solves the problem. One can't solve just guessing what it could be. One need be able to reproduce the problem. After that everything will be clear — Oleg, Jul 21 '17 at 17:43
It could be that you use my old code posted in [the answer](https://stackoverflow.com/a/8460116/315935). In the case I'd recommend you to remove the old code and to use `createContexMenuFromNavigatorButtons` method from `plugins/jquery.createcontexmenufromnavigatorbuttons.js` and `plugins/jquery.contextmenu-ui.js` — Oleg, Jul 21 '17 at 17:50
That helped a lot. I now have a context menu, but the styling is way off. I've posted a screenshot and code in the OP. — jtaylor___, Jul 21 '17 at 20:25
jQuery UI changes 3 times (in jQuery UI 1.10, 1.11 and 1.12) the structure of CSS used in UI menu. The existing settings in `jquery.contextmenu-ui.js` was not changed last years. I'd recommend you to try your demo with jQuery UI 1.11.4. If I correctly understand your problem then it's pur CSS problem in compatibility of default settings (or your old setting) from `jquery.contextmenu-ui.js` (or `jquery.contextmenu.js`) with new jQuery UI 1.12.1. One need to adjust the settings. — Oleg, Jul 22 '17 at 10:43

Oleg · Accepted Answer · 2017-07-22T12:47:40.053

It seems to me, that the reason of your problems are not migration from jqGrid (4.6.0) to free jqGrid (4.14.1), but migration to jQuery UI 1.12.1. The CSS style of jQuery UI Menu is changed many times in version 1.10.x, 1.11.x and 1.12.x. The plugins jquery.contextmenu.js and jquery.contextmenu-ui.js are old. They are based on the code published 10 years ago (see the date 16 July 2007 in comments of jquery.contextmenu.js file). If you don't really require to use jQuery UI 1.12.1, then I'd suggested you just use jQuery UI 1.11.4 instead. It changes the look of the context menu to the following:

If you do require to use jQuery UI 1.12.1 then you should change the default settings used by jquery.contextmenu-ui.js with respect of the following code:

$.contextMenu.defaults({
    menuShadowStyle: {
        "box-shadow": "8px 8px 8px #aaaaaa",
        margin: "-2px",
        padding: "0"
    },
    itemIconSpanStyle: {
        "float": "none",
        top: "-2px",
        position: "relative"
    }
});

It's important that you updates jquery.contextmenu-ui.js to the latest version from GitHub. If you have to use the jquery.contextmenu-ui.js 4.14.1 from CDN then you need to add additional CSS rules additionally to above call of $.contextMenu.defaults method

.jqContextMenu .ui-menu .ui-icon {
    position: relative;
}
.jqContextMenu li span {
    float: none !important;
}

see http://jsfiddle.net/OlegKi/avxvy1z0/

@user2340157: Small additional remark: I see that you never used your right to **vote** answers or questions. The most important goal of stackoverflow is sharing *helpful* information with other developers. The main criteria whether the information if helpful is the *voting counter*. You have right to vote about 30 answers **per day** (see [here](https://meta.stackexchange.com/a/5213/147495)). It's recommended to vote any article, which your read and which information for find helpful (recommended to other developers). Please use the voting right if you want to help other developers. — Oleg, Jul 24 '17 at 16:25

Convert from jqgrid to free-jqgrid, now no context menu

1 Answers1