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 context menu with toolbar requires additional coding.

How to create context menu automatically from jqgrid top level toolbar so that additional coding is not required? Context menu should contain toolbar buttons icons and button titles become menu item titles. Selection menu triggers toolbar button click event.

Or if this is not possible, how to sync context menu items with toolbar? Fox example, if navtoolbar call has del:false , Delete command in context menu should not appear or appear disabled.

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'
        }
    });
}