opening contextmenu causes losing the hover style of the target element

[Jason]

Hi All,

I use radcontextmenu on a html table, the table has a row hover style applied which highlights the row when mouse hovers on it. But when right click on the row to open the context menu, the hover style disappears. I have noticed the browser default contextmenu doesn't have this issue. Please see the screenshots and css attached.

.hor-minimalist-b tbody tr:hover td
{
    background: #F3E2A9;
    color: #009;
}

Thanks in advance,

Jason

[Shinu]

Hi Jason,

Please try the following sample code snippet which works fine at my end.

ASPX:

<table id="tblMenu">
    <tr>
        <td>
            File
        </td>
    </tr>
</table>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientShowing="OnClientItemFocus">
    <Items>
        <telerik:RadMenuItem Text="New">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Open">
        </telerik:RadMenuItem>
    </Items>
    <Targets>
        <telerik:ContextMenuControlTarget ControlID="tblMenu" />
    </Targets>
</telerik:RadContextMenu>

JavaScript:

<script type="text/javascript">
    function OnClientItemFocus(sender, args) {
        var table = document.getElementById("tblMenu");
        table.style.background = "#F3E2A9";
        table.style.color = "#009";
    }
</script>

CSS:

<style type="text/css">
    tbody tr:hover td
    {
        background: #F3E2A9;
        color: #009;
    }
</style>

Thanks,
Shinu.

[Jason]

Thanks Shinu.

But it seems the hover style is hard copied to the menu onclientshowing event. how about the cases when multi tables with various hover styles share the same menu? is there anyway to keep the target style as it is when menu pops up?

Cheers,

Jason  

[Magdalena]

Hi Jason,

The behavior of hovered items when the browser context menu is opened depends on the browser that you are using. In the Firefox you can hover the items after opening the context menu. The same behavior has the RadContextMenu as shows this video. The only difference is position of the popup. The browser default context menu expands next to the cursor so when you open the menu, the item is still hovered. The RadMenu popup expands under the cursor so the item stops to be hovered at the time of opening the menu. In the both context menus after moving the mouse the item is hovered.
In the Chrome hovering the items is disabled after expanding the context menu as this video shows.

We are sending you a solution where the hovered item has hovered effect also after expanding the context menu. We hope this is helpful for you.

Regards,
Magdalena
Telerik

 

 

[Jason]

Thanks a lot Magdalena. Looks like this is the closest workaround I can have when using Chrome. Hopefully Telerik will have it fixed in the next release.

Very appreciate.

Jason

[Magdalena]

Hi Jason,

We are glad that the workaround meet your expectation.

Actually the behavior of the RadContextMenu is not a bug because the hovering of elements works also after expanding the RadContextMenu so it is not an issue for fixing. When you open the context menu and the cursor is not over the target element but over the RadContextMenu, the target element is not hovered any more. this is the reason why the element loses the hover effect. If you would like the target element has still the effect such as it is hovered, it is necessary to add to it an additional class how we have made it in the workaround. Because of the target element is not a part of the RadContextMenu we can support this behavior as default so it is necessary to add a workaround for concrete scenario.

Regards,
Magdalena
Telerik