Hi,
I'm trying to display a context menu that expands upwards from the div element. First time I click the div, everything works fine. If i click only inside the div, the menu and the animation work as expected. The problem starts when I click outside the div when the menu is expanded. The animation seems to break and the next time I click the div, the menu does not start expanding from the top edge of the div but appears below it and slides upwards.
regards
Pawel
I'm trying to display a context menu that expands upwards from the div element. First time I click the div, everything works fine. If i click only inside the div, the menu and the animation work as expected. The problem starts when I click outside the div when the menu is expanded. The animation seems to break and the next time I click the div, the menu does not start expanding from the top edge of the div but appears below it and slides upwards.
regards
Pawel
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:scriptmanager id="Sc1" runat="server"> |
| </asp:scriptmanager> |
| <div id="divToClick" style="border: solid thin red; width: 50px; height: 25px; position: absolute; |
| top: 300px; left: 100px;" onclick="ShowMenu(event);"> |
| </div> |
| <telerik:RadContextMenu ID="RadContextMenu1" runat="server" DefaultGroupSettings-ExpandDirection="Up"> |
| <Items> |
| <telerik:RadMenuItem Text="Item1" Value="vItem1"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem Text="Item2" Value="vItem2"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem Text="Item2" Value="vItem3"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadContextMenu> |
| </form> |
| </body> |
| <script type="text/javascript"> |
| function ShowMenu(e) |
| { |
| var contextMenu = $find('RadContextMenu1'); |
| var divToClick = $get('divToClick'); |
| var bounds = Sys.UI.DomElement.getBounds(divToClick); |
| var x = parseInt(bounds.x); |
| var y = parseInt(bounds.y - 75); |
| contextMenu.showAt(x, y); |
| $telerik.cancelRawEvent(e); |
| } |
| </script> |
| </html> |