RadMenu items are not collapsing, if I click/Open another RadMenu...

[Ragu]

Hi Telerik Team,

 I have More than one RadMenus in my application. After update the latest telerik 2011 (Telerik.Web.UI), the RadMenus are behave in a different manner. When I click/open one RadMenu without selecting the its item, click/Open the another RadMenu causes the problem (the first RadMenu items are not collapsing, it remains open). Please see the screenshot attached herewith. I need to collapse the First RadMenu items, if I click/Open the another Radmenu.


Please help me regarding  this.


Thanks,

V. Raguraman.

[Kate]

Hi Ragu,

The information that you provided is not enough for me to replicate the issue that you describe. Can you provide more details on your scenario and steps on how to reproduce the described behavior? For instance the code that you use for the implementation of the menu controls would be very helpful.  

Regards,
Kate
the Telerik team

[Ragu]

Thanks for your reply.

Herewith I am attaching the simple example of RadMenu. There are two radmenus in the page which has ClickToOpen property set as true. If I click/Open one Radmenu without selecting/clicking its items, move to another RadMenu and click/Open it. Now, the first RadMenu is not collapsing (closing) its items (remains Open), I want the radmenu items should be closed as soon as I leave the RadMenu.

Note 1:  This problem exists in the latest telerik (2011), it is working fine in Telerik (2008)

Note 2:
Also, This behavior working fine if the ClickToOpen property set to false. if we do so, when we mouse over, radmenu pops up. The radmenu should popup after we click the root item.

Please see the screenshot attached herewith.

Code starts here :
--------

 <telerik:RadMenu ID="rmDisplay" runat="server" ClickToOpen="True"   CausesValidation="False"  skin="Black"     >
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Display: Table"  Value="Table" PostBack="false" >
                                    <GroupSettings ExpandDirection="Up" Height="100px"  />
                                    
                                    <Items>
                                    
                               
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                                
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                       
                                
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                               
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                           
                                
                                
                                  <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                         
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                
                              
                                
                                
                                
                               
                                
                               
                                
                             
                                
                                    
                                    
                                    </Items>
                                    
                                </telerik:RadMenuItem>
                                
                                 
                                
                            </Items>
                            <DefaultGroupSettings ExpandDirection="Up"  Height="100px"  />
                            <CollapseAnimation Duration="200" Type="OutQuint"  />
                        </telerik:RadMenu>


<br/>

<br/>


<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="True"   CausesValidation="False"  skin="Black"     >
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Display: Table"  Value="Table" PostBack="false" >
                                    <GroupSettings ExpandDirection="Up" Height="50px"  />
                                    
                                    <Items>
                                    
                                    <telerik:RadMenuItem runat="server" Text="Graph"  Value="Table1">
                                
                                </telerik:RadMenuItem>
                                
                                
                                 <telerik:RadMenuItem runat="server" Text="Images"  Value="Table2">
                                    
                                </telerik:RadMenuItem>
                                
                                </Items>
                                
                                </telerik:RadMenuItem>
                                
                                </Items>
                                
                                <DefaultGroupSettings ExpandDirection="Up" OffsetY="2" />
                            <CollapseAnimation Duration="10" Type="None" />
                                
                                </telerik:RadMenu>


---- code ends here

[Kate]

Hello Ragu,

One way I can think of to workaround this is to close the menu (using javascript close() method) using the client side OnClientItemBlur event of the RadMenu control.

All the best,
Kate
the Telerik team

[Ragu]

Hi Kate,

    I have tried the "OnClientItemBlur" event,  If I navigate to another item (In the same RadMenu), popup closes immediately (due to "menu.close()" in the "OnClientItemBlur" event. As I have already mentioned, it is working fine with the old (Telerik.Web.UI (2008)), but it is not working properly with the new (Telerik.Web.UI (2011)).  Please do the needful.


Thanks,

V. Raguraman

[Kate]

Hello Ragu,

You can use the following workaround to get the desired functionality of the RadMenu control:

<script type="text/javascript">
          function OnClientItemBlurMenu(sender, args) {
              sender.close(true);
          }
          function OnClientMouseOverHandler(sender, eventArgs) {
              if (eventArgs.get_item().get_parent() == sender) {
                  sender.set_clicked(false);
              }
          }
      </script>

markup:

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="True" CausesValidation="False"
           OnClientMouseOver="OnClientMouseOverHandler" OnClientItemBlur="OnClientItemBlurMenu"
           Skin="Black"  ExpandAnimation-Duration="0">
           <Items>
               <telerik:RadMenuItem runat="server" Text="Display: Table" Value="Table" PostBack="false">
                   <GroupSettings ExpandDirection="Up" Height="100px" />
                   <Items>
                       <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">
                       </telerik:RadMenuItem>
                   </Items>
               </telerik:RadMenuItem>
           </Items>
           <DefaultGroupSettings ExpandDirection="Up" Height="100px" />
       </telerik:RadMenu>
      ....
       <telerik:RadMenu ID="RadMenu2" runat="server" ClickToOpen="True" CausesValidation="False"
           OnClientMouseOver="OnClientMouseOverHandler" OnClientItemBlur="OnClientItemBlurMenu"
           Skin="Black" ExpandAnimation-Duration="0">
           <Items>
               <telerik:RadMenuItem runat="server" Text="Display: Table" Value="Table" PostBack="false">
                   <GroupSettings ExpandDirection="Up" Height="50px" />
                   <Items>
                       <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">
                       </telerik:RadMenuItem>
                       <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">
                       </telerik:RadMenuItem>
                   </Items>
               </telerik:RadMenuItem>
           </Items>
           <DefaultGroupSettings ExpandDirection="Up" OffsetY="2" />
       </telerik:RadMenu>

Regards,
Kate
the Telerik team