how to build jqgrid context menu from top level toolbar

Question

Custom values to Context Menu Items in JQgrid contains great sample about adding context menu to jqgrid. If edit,delete, add operations are dynamically disabled, synching co

Answer 1

My new demo demonstrate how to do this:

In the demo I use small modification of the jquery.contextmenu.js included in the plugins directory of jqGrid. My code is far to be perfect especially in usage of CSS classes and getting colors used in menuStyle and itemHoverStyle of the contextMenu. Nevertheless the code do want we need.

The main part of the demo consist from createContexMenuFromNavigatorButtons function which can be called after the navigator bar are build (after navGrid and navButtonAdd). The usage is very simple:

createContexMenuFromNavigatorButtons($("#list"), '#pager');

The code of createContexMenuFromNavigatorButtons you will find below:

function createContexMenuFromNavigatorButtons(grid, pager) {
    var buttons = $('table.navtable .ui-pg-button', pager),
        myBinding = {},
        menuId = 'menu_' + grid[0].id,
        menuDiv = $('<div>').attr('id', menuId).hide(),
        menuUl = $('<ul>');

    menuUl.appendTo(menuDiv);
    buttons.each(function () {
        var $div = $(this).children('div.ui-pg-div:first'), $spanIcon, text, $td, id, $li, gridId = grid[0].id;

        if ($div.length === 1) {
            text = $div.text();
            $td = $div.parent();
            if (text === '') {
                text = $td.attr('title');
            }
            if (this.id !== '' && text !== '') {
                id = 'menuitem_' + this.id;
                if (id.length > gridId.length + 2) {
                    id = id.substr(0, id.length - gridId.length - 1);
                }
            } else {
                // for custom buttons
                id = $.jgrid.randId();
            }
            $li = $('<li>').attr('id', id);
            $spanIcon = $div.children('span.ui-icon');
            $li.append($spanIcon.clone().css("float", "left"));
            $li.append($('<span>').css({
                'font-size': '11px',
                'font-family': 'Verdana',
                'margin-left': '0.5em'
            }).text(text));
            menuUl.append($li);
            myBinding[id] = (function ($button) {
                return function () { $button.click(); };
            }($div));
        }
    });
    menuDiv.appendTo('body');
    grid.contextMenu(menuId, {
        bindings: myBinding,
        onContextMenu: function (e) {
            var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i, lastSelId;
            if (rowId) {
                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'
        }
    });
}