Question

In jqgrid when I hover the mouse on any row it highlights the row. But when I use context enu, the highlighted style is gone for that row.

Now users are not aware which row was the context menu opened for. I would like to know if we can retain the hovered style. I know we can do setSelect on the grid for the selected row, but I don’t want to select the row. Thanks in advance…

Answer 1

I suggest that you use mouseover and mouseleave (or the jQuery.hover event which is the same) to set the ui-state-hover class on the row on which the context menu will be opened. In the way you can fix the behavior from the standard

to the following:

The demo demonstrate my suggestion live. The corresponding code I included below:

$grid.contextMenu('myMenu1', {
    bindings: {
        edit: function (trigger, currentTarget) {
            $(trigger).jqGrid('editRow',
                $(currentTarget).closest("tr.jqgrow").attr('id'),
                true);
        },
        del: function (trigger, currentTarget) {
            $(trigger).jqGrid('delGridRow',
                $(currentTarget).closest("tr.jqgrow").attr('id'));
        }
    },
    menuStyle: {
        backgroundColor: '#fcfdfd',
        border: '1px solid #a6c9e2',
        maxWidth: '600px',
        width: '100%'
    },
    itemHoverStyle: {
        border: '1px solid #79b7e7',
        color: '#1d5987',
        backgroundColor: '#d0e5f5'
    },
    onShowMenu: function (e, $menu) {
        var $row = $(e.target).closest('tr.jqgrow');
        $menu.mouseover(function () {
            try {
                $row.siblings().removeClass('ui-state-hover');
            } catch (e) {}
            $row.addClass('ui-state-hover');
        }).mouseleave(function (e) {
            var $rowNew = $(e.target).closest('tr.jqgrow');
            if ($rowNew.attr('id') !== $row.attr('id')) {
                $row.removeClass('ui-state-hover');
            }
        });
        return $menu;
    }
});