opening contextmenu causes losing the hover style of the target element

6 posts, 1 answers
  1. Jason
    Jason avatar
    10 posts
    Member since:
    Aug 2013

    Posted 12 Apr 2014 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Apr 2014 in reply to Jason Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason
    Jason avatar
    10 posts
    Member since:
    Aug 2013

    Posted 14 Apr 2014 in reply to Shinu Link to this post

    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  
  5. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 14 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jason
    Jason avatar
    10 posts
    Member since:
    Aug 2013

    Posted 15 Apr 2014 in reply to Magdalena Link to this post

    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
  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 16 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017