RadContextMenu displayed after clicking decorated button collapses inmediately

[Luis]

Hello,

I've got a group of buttons into a div, which is defined as a decorated zone.

When one of the buttons is pressed a context menu is displayed, but this menu collapses inmediately. I have tried the same removing the div from the DecorationZoneID property, and then it works (the context menu keeps expanded).

Here is my code:

<script type="text/javascript">

function showMenu(e) {

          var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

                 

          contextMenu.showAt(e.screenX, e.screenY);          

        }

</script>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecorationZoneID="Buttons"

                              DecoratedControls="All" />

<div id="Buttons" >

      <input id="Button1" type="button" onclick="showMenu(event)" value="Sections" />

                    <telerik:RadContextMenu ID="RadContextMenu1" runat="server" CollapseDelay="50000">

                      <Items> 

...

                      </Items>

                    </telerik:RadContextMenu>

    </div>

Any help? Thank you.

[Luis]

Could it be related with formdecorator focus problem?

It is possible that contextmenu, due to formdecorator, cannot get focus and so it hides.

[Luis]

Please, Could anyone from Telerik tell me something about this problem?

Thanks in advance.

[Svetlina Anati]

Hi Luis,

I already answered your other thread and for your convenience and for others who might encounter the same problem, I pasted it below:

In general, you should cancel the event in order to prevent it to bubble to the document and this is done by calling $telerik.cancelRawEvent(event) as highlighted below:

http://www.telerik.com/help/aspnet-ajax/menu_clientsideradmenuradcontextmenu.html

In the case when the button is decorated by the RadFormDecorator, you should do this with a little timeout as shown below:

function showMenu(e) {


          var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

          var x = e.screenX;
          var y = e.screenY;
          setTimeout(function()
          {
            contextMenu.showAt(x, y);
          }, 100);

          $telerik.cancelRawEvent(e);

        }
        </script>

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Luis]

Thank you very much.

I tried before what you tell me in this post, both Cancel and timeout, but I definitely did something wrong bacause after copying your code everything works fine.