CODEWITHSUNDEEP
jquery-uijqgrid
varaprakash
varaprakash

Reputation: 487

Jqgrid - How to retain the hovered style when using context menu for a row

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...

Upvotes: 3

Views: 1500

Answers (1)

Oleg
Oleg

Reputation: 221997

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

enter image description here

to the following:

enter image description here

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

Upvotes: 1

Related Questions