Open menu with JavaScript

[Niclas]

I am trying to open a menu from the onClick event of a A-link.

I use this function

function

openRadMenu(menuId)

 

{

 

 

var oRadMenu = $find(menuId);

 

 

oRadMenu.get_items().getItem(0).click();

 

}

The menu opens but it is closed again at once. It does not stay open.

The menu looks like this:

 

 

</a>

 

 

 

 

 

<telerik:RadMenu ClickToOpen ="true" ID="RadMenu1" runat="server" Skin="Office2007" EnableEmbeddedSkins ="true" >

 

 

 

 

 

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

 

 

 

 

<Items>

 

 

 

 

 

 

<telerik:RadMenuItem text="Apa">

 

 

 

 

 

 

<Items>

 

 

 

 

 

<telerik:RadMenuItem Text="Mission Statement">

 

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

 

<telerik:RadMenuItem Text="Strategic Plan">

 

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

</Items>

 

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

 

</Items>

 

 

</telerik:RadMenu>

I have also tried with oRadMenu.get_items().getItem(0).click();

 

[Paul]

Hello Niclas,

In order to achieve your goal you should use the open() method. Please refer to our Client-Side API example for details on how to achieve your goal.

Greetings,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Niclas]

I have tried that as well but the menu is still closed at once. But if i set the property ClickToOpen to false the menu stays open. But that is not the behavior i want. Try it yourself, I try to open the menu like this:

<

a href ="#" onclick="openRadMenu('<%=radmenu1.clientid %>');">AA</a>

 

function

openRadMenu(menuId)

 

{

 

var oRadMenu = $find(menuId);

 

oRadMenu.get_items().getItem(0).open();

}

[Paul]

Hi Niclas,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript">
    function openRadMenu(e)
    {
        var oRadMenu = $find('<%= RadMenu1.ClientID %>');
        window.setTimeout(
            function()
            {
                oRadMenu.get_items().getItem(0).open();
            }
            , 0);
    }
    </script>

    <telerik:RadMenu ID="RadMenu1" ClickToOpen="true" runat="server" Skin="Office2007" EnableEmbeddedSkins="true">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        <Items>
            <telerik:RadMenuItem Text="Apa">
                <Items>
                    <telerik:RadMenuItem Text="Mission Statement">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Strategic Plan">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    <a href ="#" onclick="openRadMenu();">AA</a>
</form>

Regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.