RadMenu ClickToOpen and Close it after MenuItem Clicked

18 posts, 1 answers
  1. Kiresh
    Kiresh avatar
    24 posts
    Member since:
    Sep 2012

    Posted 01 Aug 2013 Link to this post

    Hello Everyone,

    i want to close Menu-items after clicked on any MenuItems using javscript  OnClientItemClicked.

    and my RadMenuItems are under

    <telerik:GridTemplateColumn >
                            <ItemTemplate>
                         <telerik:RadMenu ID="RadMenuClient" runat="server" EnableRoundedCorners="true" EnableShadows="true"
                                OnClientItemClicked="OnClientItemClicked" ExpandAnimation-Type="None" CollapseAnimation-Type="None"
                                ExpandDelay="0" CollapseDelay="0" Selected="false" ClickToOpen="true">
                                <Items>
                                  <telerik:RadMenuItem ImageUrl="../images/1.jpg" Selected="false">
                                    <GroupSettings ExpandDirection="Down" OffsetX="20" OffsetY="-20" />
                                    <Items>
                                      <telerik:RadMenuItem Text="Add" Value="Add">
                                      </telerik:RadMenuItem>
                                      <telerik:RadMenuItem Text="Edit" Value="EditI">
                                      </telerik:RadMenuItem>
                                      <telerik:RadMenuItem Text="Delete" Value="Delete">
                                      </telerik:RadMenuItem>
                                   </Items>
                                  </telerik:RadMenuItem>
                                </Items>
                              </telerik:RadMenu>
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>


    can anyone help me ?

    Thanks,
  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 01 Aug 2013 Link to this post

    Hi,

    Please try the below javascript implementation

    function onClientItemClicked(sender, eventArgs) {
                    var menu = $find("<%= RadMenuClient.ClientID %>");
                    menu.close();
                }


    Thanks,
    A2H
  3. Kiresh
    Kiresh avatar
    24 posts
    Member since:
    Sep 2012

    Posted 02 Aug 2013 Link to this post

    Hi

    i have already try this but it gives me error that cotrolname RadMenuClient could not found.

    any other way ?
    thanks,
  4. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 02 Aug 2013 Link to this post

    Hello,

    Please try the below javascript
    function onClientItemClicked(sender, eventArgs) {
                   sender.close(true);
               }


    Thanks,
    A2H
  5. Kiresh
    Kiresh avatar
    24 posts
    Member since:
    Sep 2012

    Posted 02 Aug 2013 Link to this post

    Hi,

    when i click on item it disappears but when again mouse over that RadMenu it reopen there with selected Item, i need it open only when i click on RadMenu .

    Thanks,
  6. Answer
    A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 02 Aug 2013 Link to this post

    Hello,

    I guess you want to achieve the following functionality

    1) when you click on a Menu item , Menu should close.
    2) On Mouse over RadMenu should not get open and it should happen only when you click on the Rad Menu.
    if that is the case Please try the below javascript implementation


    1) To Close the Menu on selecting item( same code which I provide in previous post)
    function onClientItemClicked(sender, eventArgs) {
                    sender.close(true);
                }
    2) To open Rad Menu only on "Click" event
    a)  Set the "ClickToOpen" property of Rad Menu to true
    ClickToOpen="true"
    b
    ) Hook the  OnClientMouseOver="OnClientMouseOverHandler" on radmenu and use the below javascript
    function OnClientMouseOverHandler(sender, eventArgs) {
                   if (eventArgs.get_item().get_parent() == sender) {
                       sender.set_clicked(false);
                   }
               }


    Thanks,
    A2H

  7. Kiresh
    Kiresh avatar
    24 posts
    Member since:
    Sep 2012

    Posted 02 Aug 2013 Link to this post

    Hi,

    yes u guess exactly what i need and i have already done first 2 steps

    thanks for last step it works fine.


    Thanks
  8. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 21 Nov 2018 in reply to A2H Link to this post

    The code you have given is working for main menu not for sub menu like when i hover moves on sub menus then menu is opening and closing by itself and on click sub menus are not getting close please help me out of this problem 
  9. Peter Milchev
    Admin
    Peter Milchev avatar
    616 posts

    Posted 26 Nov 2018 Link to this post

    Hello Jenny,

    The implementation of the ClickToOpen for the sub-items requires a bit different implementation. For a sample implementation, you can check the newly created KB article Apply ClickToOpen functionality for child items.

    <telerik:RadMenu runat="server" ID="RadMenu1"
        OnClientItemClicked="OnClientItemClicked"
        OnClientMouseOver="OnClientMouseOverHandler"
        ClickToOpen="true">
    </telerik:RadMenu>

    <script>
        function OnClientItemClicked(sender, args) {
            var item = args.get_item()
            if (item.get_parent() !== sender) {
                item._toggleState();
            }
            if (item.get_items().get_count() == 0) {
                sender.close(true);
            }
        }
        function OnClientMouseOverHandler(sender, args) {
            sender.set_clicked(false);
        }
    </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            for (int i = 0; i < 5; i++)
            {
                var item = new RadMenuItem("Root " + i);
                for (int j = 0; j < 5; j++)
                {
                    var child = new RadMenuItem(String.Format("Child {0}.{1}", i, j));
                    for (int k = 0; k < 5; k++)
                    {
                        var grandchild = new RadMenuItem(String.Format("GrandChild {0}.{1}.{2}", i, j, k));
                        child.Items.Add(grandchild);
                    }
                    item.Items.Add(child);
                }
                RadMenu1.Items.Add(item);
            }
        }
    }


    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 26 Nov 2018 in reply to Peter Milchev Link to this post

    Thank you so much Peter it is working for me properly
  11. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 26 Nov 2018 in reply to Peter Milchev Link to this post

    but when i am clicking on main menu again it is not getting close in this have to close all sub menus separately the main menu is closed
  12. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 28 Nov 2018 in reply to Peter Milchev Link to this post

    Please help me. My codes are running properly only the thing is that i have a main menu which have submenu's submenu. when i want to close that menu that time it is not closing i have to click twice for that. so please help me out of this problem. below i am attaching my code which i have tried:

    JavaScript:

    <script type="text/javascript">
    function OnClientItemClicked(sender, args) { 
                        var item = args.get_item()
                        if (item.get_parent() !== sender) {
                            item._toggleState();
                        }
                        if (item.get_items().get_count() == 0) {
                            sender.close(true);
                        }
                    }
            function OnClientMouseOverHandler(sender, args) {
                        sender.set_clicked(false);
    }
    </script>

     

    .aspx Code

    <telerik:RadMenu runat="server" ID="RadMenu2" Width="180px" EnableEmbeddedSkins="True" Skin="Bootstrap" Flow="Vertical"
                                ShowToggleHandle="true" ClickToOpen="true"  OnClientItemClicked="OnClientItemClicked" OnClientMouseOver="OnClientMouseOverHandler">
                                <Items>
                                    <telerik:RadMenuItem Value="ChangeCompanies" Text="Change Company" Visible="False"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Home" NavigateUrl="HomePage.aspx" Visible="False"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="My Info" GroupSettings-Flow="Vertical" GroupSettings-OffsetY="-1">
                                        <Items>
     
                                            <telerik:RadMenuItem CssClass="raditem" Value="EmployeeInfo" Text="Employee Info" NavigateUrl="EmployeeInfo.aspx?SelectedValue=EmployeeInfo">
                                                <Items></Items>
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Value="TaxInfo" Text="Tax Info" NavigateUrl="TaxInfo.aspx?SelectedValue=TaxInfo">
                                                <Items></Items>
                                            </telerik:RadMenuItem>
     
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Pay History">
                                        <Items>
                                            <telerik:RadMenuItem CssClass="raditem" Value="Checks" Text="  Checks" NavigateUrl="CheckStubs.aspx?SelectedValue=Checks"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Value="TaxForms" Text="  Tax Forms-W2/1099" NavigateUrl="TaxForms.aspx?SelectedValue=TaxForms"></telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Administration" Visible="false">
                                        <Items>
                                            <telerik:RadMenuItem CssClass="raditem" Value="Permissions" Text="Permissions" NavigateUrl="Permissions.aspx?SelectedValue=Permissions"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Value="Registration" Text="Registration" NavigateUrl="Registration.aspx?SelectedValue=Registration"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Value="ChangeHistory" Text="Change History" NavigateUrl="ChangeHistory.aspx?SelectedValue=ChangeHistory"></telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="My Apps" Visible="false">
                                        <Items>
                                            <telerik:RadMenuItem CssClass="raditem" Text="Human Resources">
                                                <Items>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="AddNewEmployee" Text="Add New Employee" NavigateUrl="HR/NewEmployee.aspx?SelectedValue=AddNewEmployee"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="Employees" Text="Employee List" NavigateUrl="HR/Employees.aspx?SelectedValue=Employees"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Text="HR Administration">
                                                        <Items>
                                                            <telerik:RadMenuItem CssClass="raditem" Value="AdminCustomize" Text="Customize" NavigateUrl="HR/AdminCustomize.aspx?SelectedValue=AdminCustomize"></telerik:RadMenuItem>
                                                            <telerik:RadMenuItem CssClass="raditem" Value="Settings" Text="Settings" NavigateUrl="HR/AdminSettings.aspx?SelectedValue=Settings"></telerik:RadMenuItem>
                                                            <telerik:RadMenuItem CssClass="raditem" Value="AlertsNotify" Text="Pending Forms" NavigateUrl="HR/AdminAlertsNotifications.aspx?SelectedValue=AlertsNotify"></telerik:RadMenuItem>
                                                            <telerik:RadMenuItem CssClass="raditem" Value="HRReports" Text="HR Reports">
                                                                <Items>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="AlertNotification" Text="Alerts/Notifications" NavigateUrl="HR/Reports/AlertNotification.aspx?SelectedValue=AlertNotification"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="BirthdayReport" Text="Birthday Report" NavigateUrl="HR/Reports/BirthdayReport.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="DepartmentRoster" Text="Department Roster" NavigateUrl="HR/Reports/DepartmentRoster.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="DirectDeposit" Text="Direct Deposit" NavigateUrl="HR/Reports/DirectDepositRpt.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="EmployeeContact" Text="Employee Contact" NavigateUrl="HR/Reports/EmployeeContact.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="FormsDocuments" Text="Forms/Documents" NavigateUrl="HR/Reports/FormsDocuments.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="OutstandingFormsDocuments" Text="Outstanding Forms" NavigateUrl="HR/Reports/OutstandingFormsDocuments.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                    <telerik:RadMenuItem CssClass="rptitem" Value="EmployeeReview" Text="Employee Review" NavigateUrl="HR/Reports/RptEmployeeReview.aspx?SelectedValue=HRReports"></telerik:RadMenuItem>
                                                                </Items>
                                                            </telerik:RadMenuItem>
     
                                                        </Items>
                                                    </telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="Onboarding" Text="Onboarding Wizard" NavigateUrl="HR/Onboarding.aspx?SelectedValue=Onboarding"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="MyProfile" Text="My Profile" NavigateUrl="HR/MyProfile.aspx?SelectedValue=MyProfile"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="DirectDeposit" Text="My Direct Deposits" NavigateUrl="HR/DirectDeposit.aspx?SelectedValue=DirectDeposit"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="Deductions" Text="My Deductions" NavigateUrl="HR/Deductions.aspx?SelectedValue=Deductions"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="Notifications" Text="My Notifications" NavigateUrl="HR/HRNotifications.aspx?SelectedValue=Notifications"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="NeedsAttention" Text="Needs Attention" NavigateUrl="HR/NeedsAttention.aspx?SelectedValue=NeedsAttention"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="Form" Text="Forms/Documents" NavigateUrl="HR/HRForms.aspx?SelectedValue=Form"></telerik:RadMenuItem>
                                                </Items>
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Text="Insight">
                                                <Items>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="SavedReports" Text="Reports" NavigateUrl="InSight/SavedReport.aspx?SelectedValue=SavedReports"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem CssClass="raditem" Value="ReportBuilder" Text="Report Builder" NavigateUrl="InSight/ReportBuilder.aspx?SelectedValue=ReportBuilder"></telerik:RadMenuItem>
                                                </Items>
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Text="Internet Payroll" Visible="false"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem CssClass="raditem" Text="NetClockIn" Visible="false"></telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenu>

     

    Please help me as soon as possible...

  13. Peter Milchev
    Admin
    Peter Milchev avatar
    616 posts

    Posted 29 Nov 2018 Link to this post

    Hello Jenny,

    On my side using the OnClientItemClicking event with the following handlers collapses the root item properly.

    <telerik:RadMenu runat="server" ID="RadMenu2" ShowToggleHandle="true" ClickToOpen="true" OnClientItemClicking="OnClientItemClicking" OnClientMouseOver="OnClientMouseOverHandler" ... >

    <script>
        function OnClientMouseOverHandler(sender, args) {
            sender.set_clicked(false);
        }
        function OnClientItemClicking(sender, args) {
            var item = args.get_item()
     
            if (item.get_parent() !== sender) {
                item._toggleState();
            } else {
                if (item.get_isOpen()) {
                    sender.close(true);
                    args.set_cancel(true)
                }
            }
            if (item.get_items().get_count() == 0) {
                sender.close(true);
            }
        }
    </script>


    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 29 Nov 2018 in reply to Peter Milchev Link to this post

    Hello Peter, 

    Thanks a lot now its working properly...

  15. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 04 Dec 2018 in reply to Peter Milchev Link to this post

    Hello Peter,

    The code you have given is working properly but the problem is that when i am clicking on any menu item to go to another page menu is getting closing and expanding again it should close immidiatly on click if i am going on other page from menu.

    Please help me as soon as possible..

  16. Peter Milchev
    Admin
    Peter Milchev avatar
    616 posts

    Posted 07 Dec 2018 Link to this post

    Hello Jenny,

    I was unable to replicate the described issue. 

    What I can suggest is preparing a very simple project replicating the issue and a short video demonstrating the reproduction steps and send them to us in an official support ticket. This will allow us to investigate your exact scenario and provide more specific and accurate suggestions.

    Once we have a solution, we can share it here for convenience and better visibility from the community.

    Regards,
    Peter Milchev
    Progress Telerik
  17. Jenny
    Jenny avatar
    19 posts
    Member since:
    Oct 2018

    Posted 11 Dec 2018 in reply to Peter Milchev Link to this post

    When clicking on a menu to open it, the menu item pops up again before it opens.

    Below I have attached a video.

    Please help me...

  18. Peter Milchev
    Admin
    Peter Milchev avatar
    616 posts

    Posted 14 Dec 2018 Link to this post

    Hi Jenny,

    I am unable to replicate the issue using the implementation of the attached webform.

    Please modify it to reproduce the issue and send it as an attachment in an official support ticket so that we can investigate locally and provide more specific suggestions.

    Once we find a solution, we can share it here for convenience and better visibility from the community.

    Regards,
    Peter Milchev
    Progress Telerik
Back to Top