RadMenu - Remove rmSelected from menu item

[Amanda]

Howdy all.

Here's my situation: I have an Image Only, Root Level only RadMenu.  You click a button and a RadWindow pops up.  This works.

One of the visual elements we're using to tie the RadWindow to the RadMenu option that opened it is with a little triangle made out of CSS manipulation.  I have defined it here, using the :after tag.

.RadMenu .rmRootGroup .rmSelected:after
{
    content: "";
    position: absolute;
    top: 0px;
    left: 40px;
    border-right: 15px solid red;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

The problem is, I can't figure out how to remove the Selected status on the item to remove the triangle.  It stays up until something else is selected.

One might say "But Amanda, you can just change the :after to :before and do it on the RadWindow, and that would fix the issue!", and you're right, it would... until the window gets adjusted because it's going off the screen.  Then I need to either change the top and left for an element that's not really part of the DOM (becasue before and after make it 'pseduo'), OR!  Make it part of the meun (as I don't care WHERE it is on the window's edge), and then let my Javascript place the window without fussing with the CSS.

The Javascript code I'm posting is being called from VB using the menuEmp.ItemCheck to send back the value of the window (in this case, EmpProj).  So I go to VB, do my window creation mojo, register the script on start up so it runs when we're back, comes back and then comes into here.

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function MenuOpenWindow(windowTitle) {
            var oWindow;
            var offsetElementBounds;
            var menu = $find("<%=menuEmp.ClientID%>");
            var menuItem = menu.findItemByValue(windowTitle).get_element();

            //Closes the last window opened
            if (lastOpenedWindow) {
                lastOpenedWindow.close();
                lastOpenedWindow = null;
            }

            if (windowTitle == "EmpProj") {
                if (lastWindowTitle != "EmpProj") {
                    oWindow = $find("<%=winEmpProj.ClientID%>");
                    oWindow.show();
                    if (oWindow.get_offsetElementID()) {
                        offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
                        var x = offsetElementBounds.x + (menuItem.offsetWidth / 3);
                        var y = menuItem.offsetTop + offsetElementBounds.y - (menuItem.offsetHeight / 3);
                        oWindow.moveTo(x, y);
                    }
                    lastOpenedWindow = oWindow;
                    lastWindowTitle = "EmpProj";
                    return false;
                } else {
                    menuItem.set_selected(false);
                    lastWindowTitle = null;
                }
            }
        }
    </script>
</telerik:RadScriptBlock>

On the  if (lastWindowTitle != "EmpProj")' else statement, I have the menuItem.set_selected(false);.  According to http://www.telerik.com/help/aspnet-ajax/menu-radmenuitem-client-side.html, that should work, but I'm getting an error:

Microsoft JScript runtime error: Object doesn't support property or method 'set_selected'

And I've tried a couple of different ways, but I always end up with an error.  What have I missed?

[Amanda]

This post can be deleted - our design team decided to go a different route with the arrows!  And not because of any lack of response - when they saw my progress to this point, they decided they didn't like arrows appearing before the windows associated with them (of course, if an answer would solve that problem and still have it tied to the menu item itself, then I'd be a lot happier... XD)

[Kate]

Hi Amanda,

To answer your questions. 

Let me start with the set_selected() property that you ate trying to use. You will need to use this property to the menuItem directly as explained here. In case you use a window, some templates or pages like master and content one it is likely that some of the id-s of the controls might change and when you try to find them an exception will be thrown. For example the following code works as expected from my side:

  var menu = $find("<%= RadMenu1.ClientID %>");
    var item = menu.findItemByText("text");
item.set_selected(true);

Considering your other question I would like to ask you to provide some more details, for example a simple markup code that you use and an image file that demonstrates the problematic look would be very useful. Thus I could get a better understanding of the specific issue that you are experiencing and help you out in the most efficient way.

Regards,
Kate
Telerik