RadMenu MenuItem Css class

7 posts, 0 answers
  1. Harry Kable
    Harry Kable avatar
    19 posts
    Member since:
    Jan 2010

    Posted 21 May 2010 Link to this post

    Hi
    I am using a RadMenu with items created on the client. All menu item selection events are client side.
    It appears that the hover Css class is maintained by a menu item when clicked and only removed when another item is clicked.
    This is not desirable when a root item has no child items.
    In one instance in my application, selecting a root item opens a modal RadWindow. Once the RadWindow is closed, the hover Css class on the selected root item can not be removed. It remains set until the application is rebooted.
    Is there a remedy for this issue?
    Regards
    Harry Kable
  2. Yana
    Admin
    Yana avatar
    5027 posts

    Posted 25 May 2010 Link to this post

    Hello Harry,

    I guess that this is the selected style of the menu items, you can remove it by setting EnableSelection property to "false".

    Kind regards,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Harry Kable
    Harry Kable avatar
    19 posts
    Member since:
    Jan 2010

    Posted 25 May 2010 Link to this post

    Hi Yana
    Thanks you for your reply. I have tried your suggestion and it does not appear to make any difference to the behaviour of the menu.
    In the case of a root menu item opening a modal RadWindow, the hover Css Class remains selected. Once the RadWindow is closed the hover Css Class can not be removed. ie using the Office2007 skin, the selected item remains orange and no amount of click it or any other menu item will change that.
    I have attempted to research the EnableSelection property of the RadMenu but the online help is not very helpful.
    Can you please have another look at this issue.
    Thanks and regards
    Harry Kable
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 28 May 2010 Link to this post

    Hi Harry,

    You can see if the menu has a selected item and unselect it:

    var selectedItem = $find("RadMenu1").get_selectedItem()
    if (selectedItem) selectedItem.set_selected(false);

    The EnableSelection property instructs the menu to highlight the currently selected item. As you've noticed the selected state will be kept until another item is selected. When EnableSelection is set to "false" only focused state will be maintained and it will be cleared when another element on the page is focused.

    I hope this helps.

    Sincerely yours,
    Tsvetomir Tsonev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Harry Kable
    Harry Kable avatar
    19 posts
    Member since:
    Jan 2010

    Posted 29 May 2010 Link to this post

    Hi Tsvetomir
    Thank you for your reply. I would like to tell you that your suggestion had fixed my problem but it has not.
    Neither the EnableSelection property nor the set_selected method seem to make any difference. In fact the get_selectedItem method returns null immediately after clicking an item. That does not surprise me as the menu item shows the hover colour not the selected colour.
    These are the facts:
    - I am clicking a root menu item which has no child items
    - the click event opens a modal RadWindow
    - the menu item button maintains the hover background colour (not the selected colour) even when the RadWindow is closed and another root menu item is selected. At that time there are 2 menu items selected. 
    - I cannot remove the hover background colour from the offending button without closing the browser.
    At the moment this is a show stopper for Telerik controls.
    Thanks and regards
    Harry Kable
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 02 Jun 2010 Link to this post

    Hi Harry,

    I've created a sample page in order to test the scenario and I can confirm that applying my suggested solution requires a few tricks. Deselecting the item in the itemClicked event won't work as in this moment the item is not yet marked as selected. We need to use a timeout in order to deselect the item after the handler has finished executing:

    <%@ Page Language="C#" %>
     
    <!DOCTYPE html>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
     
        <script type="text/javascript">
            function onItemClick(sender, eventArgs)
            {  
                radalert("Modal dialog");
     
                window.setTimeout(function() {
                    // Deselect the item once the menu code has finished executing
                    eventArgs.get_item().set_selected(false);
                }, 0);
            }
        </script>
     
        <telerik:RadMenu ID="RadMenu1" runat="server" EnableSelection="true" OnClientItemClicked="onItemClick">
            <Items>
                <telerik:RadMenuItem Text="Open modal window">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Dummy">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
     
        <%-- We need to bump up the index of the window --%>
        <telerik:RadWindowManager runat="server" ID="RadWindowManager1" style="z-index: 10000;" />
        </form>
    </body>
    </html>

    I was not able to reproduce points 3 & 4 though. Let me know if they still occur with the current solution.

    I hope this helps.

    Sincerely yours,
    Tsvetomir Tsonev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. CDU4
    CDU4 avatar
    1 posts
    Member since:
    May 2010

    Posted 12 Sep 2010 Link to this post

    Another method that worked for me is this: In the client code that processes the clicked or clicking event, just set the focus to another object on the page.
Back to Top