0

Code below is used to generate context menu from top level toolbar based in answer How to change column name in column chooser pop up in jqgrid?

Toolbar contains also select element. It appears as Form0...Form9 in context menu and makes context menu wider. How to exclude it from context menu ?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>https://stackoverflow.com/q/29365758/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <!--<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>-->
    <!--<link rel="stylesheet" href="../jqGrid/css/ui.jqgrid.css">-->
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
    <style>
        html, body { font-size: 75%; }
        .ui-datepicker select.ui-datepicker-year,
        .ui-datepicker select.ui-datepicker-month {
            color: black
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!--<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>-->
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <!--<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>-->
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.contextmenu-ui.js"></script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.js"></script>
    <script>
    //<![CDATA[
        /*global $ */
        /*jslint browser: true, unparam: true */
        $(function () {
            "use strict";
            var mydata = [
                    { id: "10",  invdate: "2007-10-01", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "90",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                    { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                $grid = $("#list"),
                initDateEdit = function (elem) {
                    $(elem).datepicker({
                        dateFormat: "dd-M-yy",
                        autoSize: true,
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                },
                initDateSearch = function (elem) {
                    setTimeout(function () {
                        initDateEdit(elem);
                    }, 50);
                };

            $grid.jqGrid({
                data: mydata,
                colNames: ["Client", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"],
                colModel: [
                    { name: "name", align: "center", width: 65, editrules: {required: true} },
                    { name: "invdate", width: 125, align: "center", sorttype: "date",
                        formatter: "date", formatoptions: { newformat: "d-M-Y" },
                        editoptions: { dataInit: initDateEdit },
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
                    { name: "closed", width: 70, template: "booleanCheckboxFa" },
                    { name: "ship_via", width: 105, align: "center", formatter: "select",
                        edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
                    { name: "amount", width: 75, template: "number" },
                    { name: "tax", width: 52, template: "number" },
                    { name: "total", width: 60, template: "number" },
                    { name: "note", width: 60, sortable: false, edittype: "textarea" }
                ],
                rowNum: 10,
                rowList: [5, 10, 20],
                iconSet: "fontAwesome",
                toppager: true,
                pager: true,
                cmTemplate: { autoResizable: true, editable: true },
                autoResizing: { compact: true },
                //autoresizeOnLoad: true,
                autoencode: true,
                sortname: "invdate",
                viewrecords: true,
                sortorder: "desc",
                rownumbers: true,
                hidegrid: false,
                caption: "Try right mouse click inside of the grid body"
            }).jqGrid("navGrid")
            .jqGrid("setGroupHeaders", {
                useColSpanStyle: true,
                groupHeaders: [
                    { startColumnName: "amount", numberOfColumns: 3, titleText: "<em>Price</em>" },
                    { startColumnName: "closed", numberOfColumns: 2, titleText: "Shiping" }
                ]
            })

            .jqGrid("showHideColumnMenu")
            .jqGrid("createContexMenuFromNavigatorButtons", $grid.jqGrid("getGridParam", "toppager"));



        var i, layout = 1,
            selectElem= '<select tabindex="-1" id="_layout">';

        for (i=0; i<10; i++) {
            selectElem += '<option value="'+i+'" ';
            if (i==layout)
                selectElem += ' selected';
            selectElem += '>Form ' + i + '</option>'
        }

        $grid.jqGrid('navButtonAdd', '#list_toppager', {
            caption:  '<td class="ui-pg-button ui-corner-all">' +
               '<div class="ui-pg-div">' +
               selectElem +
               '</select>' +
               '</div></td>',
            buttonicon:'',
        });



        });
    //]]>
    </script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
    <table id="list"></table>
</div>
</body>
</html>

Update

Expceted result is that last line does not appear in context menu:

expected

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378
  • First of all I think that you should reduce the value of `caption:` just to `selectElem +''`. I can include HTML fragment from the button in the context menu. The `` inside of menu will not not do the same, because `click` inside of menu item will close the item instead of opening dropdown select inside of menu item (over the menu). – Oleg Apr 05 '15 at 15:21
  • Expected behaviour is not to render it in context menu at all or make it act like in toolbar select: first click opens dropdown, second click selects item and invokes onchange – Andrus Apr 05 '15 at 15:57
  • You should not forget that the menu is created by `contextMenu` plugin. The first click will be processed by `contextMenu` plugin which hides the menu and then calls binding function of the menu item. The binding function which creates `createContexMenuFromNavigatorButtons` simulate `click` of the div in the original toolbar menu. All that have sense only with buttons, but not with ` – Oleg Apr 05 '15 at 16:17
  • Pager inside same div is not rendered so there is code to select elements to render. Maybe to add check so that `select` element in toolbar is not added to context menu. Or check for some magical class name or provide method to control this – Andrus Apr 05 '15 at 16:23
  • Currently there are **no selects** in the toolbar, like no 3-state buttons. The plugin should work with 3-state buttons by the way, but button with ` – Oleg Apr 05 '15 at 16:47
  • I need only that select is not rendered in context menu. Context menu is rarely used and is not avaliable on mobiles and tablets, I dont want to add any custom code. Simple way to disable select and other non-working controls appearing in context menu is sufficient. I changed question to `How to **not** generate context menu for toolbar select element in free jqgrid` – Andrus Apr 05 '15 at 17:34
  • OK it's really possible, but one get an additional disadvantage: if the user clicks on the *disabled* element (``, ...) then the click can be ignored and the menu will be not closed. The effect will be different in different web browsers. – Oleg Apr 05 '15 at 20:41
  • select element should not rendered at all like pager element. – Andrus Apr 05 '15 at 20:52
  • I don't understand what you mean. The method `createContexMenuFromNavigatorButtons` the content from the toolbar buttons and placed it in the items of context menu. The existing code get the text using `$.text()` from the toolbar buttons and place it using `$.text()` too. It makes problems with your custom HTML fragment which contains `` and `` inside of HTML fragment placed in menu item. It's relative generic operation, but "not rendered"??? – Oleg Apr 05 '15 at 21:05
  • I have no idea what you mean with "select element should not rendered" and the pager has no close situation. It has either standard selects or buttons which could be disabled, but disabled elements are non-clickable and can be not good used as menu items. – Oleg Apr 05 '15 at 21:07

1 Answers1

1

I updated createContexMenuFromNavigatorButtons plugin (see here) so that it places HTML content of .ui-pg-button-text part of navigator buttons to build the context menu. If the HTML content have <select> or <input> inside then such menu items will be hidden by default. It's what you want in the Update part of your question. Th hold the plugin common enough I included onShowContextMenu callback. So you still can use

.jqGrid("createContexMenuFromNavigatorButtons",
    $grid.jqGrid("getGridParam", "toppager"),
    {
        onShowContextMenu: function ($menuUl, options) {
            // do customization of menu $menuUl
            // or modification of options of contextMenu
            // like modifications of options.bindings or example
        }
    });

to make additional customization of context menu.

Oleg
  • 220,925
  • 34
  • 403
  • 798