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

6 posts, 0 answers
  1. Ragu
    Ragu avatar
    9 posts
    Member since:
    Feb 2012

    Posted 20 Mar 2012 Link to this post

    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ragu
    Ragu avatar
    9 posts
    Member since:
    Feb 2012

    Posted 22 Mar 2012 Link to this post

    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

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Ragu
    Ragu avatar
    9 posts
    Member since:
    Feb 2012

    Posted 04 Apr 2012 Link to this post

    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
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017