[CLOSED] Change submenus to show on click instead of hover

Is there any way to do this?

We're trying to make this compatible with the iPad (no hover).

Code:

<ext:Button ID="TheButton" runat="server" Text="Menu"> <Menu> <ext:Menu ID="Menu3" runat="server"> <Items> <ext:MenuItem ID="Menu1" runat="server" Text="Menu1"> <Menu> <ext:Menu runat="server" > <Items> <ext:MenuItem ID="Item1" runat="server" Text="Item1" /> <ext:MenuItem ID="Item2" runat="server" Text="Item2" /> <ext:MenuItem ID="Item3" runat="server" Text="Item3" /> </Items> </ext:Menu> </Menu> </ext:MenuItem> <ext:MenuItem ID="Menu2" runat="server" Text="Menu2"> <Menu> <ext:Menu runat="server"> <Items> <ext:MenuItem ID="Item1" runat="server" Text="Item1" /> <ext:MenuItem ID="Item2" runat="server" Text="Item2" /> <ext:MenuItem ID="Item3" runat="server" Text="Item3" /> </Items> </ext:Menu> </Menu> </ext:MenuItem> </Items> </ext:Menu> </Menu> </ext:Button>

Hi,

There is no such option.
Needs to override some logic of Ext.menu.Menu.

I'd begin with the Menu's onClick and onMouseOver functions.

Hi,

I can suggest you this solution with the following key points:
1. Removes Menu's "mouseover", "mouseout" listeners. See AfterRender;
2. Handling the MenuItem's Click event;
3. Setting the MenuItem's HideOnClick property to false.

Example

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.Net Example</title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Button runat="server" Text="Menu"> <Menu> <ext:Menu runat="server"> <Listeners> <AfterRender Handler="this.mun(this.ul, 'mouseover', this.onMouseOver, this); this.mun(this.ul, 'mouseout', this.onMouseOut, this);" /> </Listeners> <Items> <ext:MenuItem runat="server" Text="Menu1" HideOnClick="false"> <Menu> <ext:Menu runat="server"> <Items> <ext:MenuItem ID="Item1" runat="server" Text="Item1" /> <ext:MenuItem ID="Item2" runat="server" Text="Item2" /> <ext:MenuItem ID="Item3" runat="server" Text="Item3" /> </Items> </ext:Menu> </Menu> <Listeners> <Click Handler="this.menu.isVisible() ? this.hideMenu() : this.expandMenu();" /> </Listeners> </ext:MenuItem> <ext:MenuItem runat="server" Text="Menu2" HideOnClick="false"> <Menu> <ext:Menu runat="server"> <Items> <ext:MenuItem ID="Item4" runat="server" Text="Item1" /> <ext:MenuItem ID="Item5" runat="server" Text="Item2" /> <ext:MenuItem ID="Item6" runat="server" Text="Item3" /> </Items> </ext:Menu> </Menu> <Listeners> <Click Handler="this.menu.isVisible() ? this.hideMenu() : this.expandMenu();" /> </Listeners> </ext:MenuItem> </Items> </ext:Menu> </Menu> </ext:Button> </form> </body> </html>