This is a migrated thread and some comments may be shown as answers.

RadMenu ClickToOpen and Close it after MenuItem Clicked

17 Answers 202 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kiresh
Top achievements
Rank 1
Kiresh asked on 01 Aug 2013, 09:45 AM
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,

17 Answers, 1 is accepted

Sort by
0
A2H
Top achievements
Rank 1
answered on 02 Aug 2013, 02:21 AM
Hi,

Please try the below javascript implementation

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


Thanks,
A2H
0
Kiresh
Top achievements
Rank 1
answered on 02 Aug 2013, 05:17 AM
Hi

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

any other way ?
thanks,
0
A2H
Top achievements
Rank 1
answered on 02 Aug 2013, 12:02 PM
Hello,

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


Thanks,
A2H
0
Kiresh
Top achievements
Rank 1
answered on 02 Aug 2013, 12:14 PM
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,
0
Accepted
A2H
Top achievements
Rank 1
answered on 02 Aug 2013, 04:02 PM

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

0
Kiresh
Top achievements
Rank 1
answered on 03 Aug 2013, 04:21 AM
Hi,

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

thanks for last step it works fine.


Thanks
0
Jenny
Top achievements
Rank 2
answered on 21 Nov 2018, 09:43 AM
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 
0
Peter Milchev
Telerik team
answered on 26 Nov 2018, 08:11 AM
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.
0
Jenny
Top achievements
Rank 2
answered on 26 Nov 2018, 09:43 AM
Thank you so much Peter it is working for me properly
0
Jenny
Top achievements
Rank 2
answered on 26 Nov 2018, 10:23 AM
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
0
Jenny
Top achievements
Rank 2
answered on 29 Nov 2018, 05:30 AM

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...

0
Peter Milchev
Telerik team
answered on 29 Nov 2018, 07:27 AM
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.
0
Jenny
Top achievements
Rank 2
answered on 29 Nov 2018, 11:26 AM

Hello Peter, 

Thanks a lot now its working properly...

0
Jenny
Top achievements
Rank 2
answered on 04 Dec 2018, 12:08 PM

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..

0
Peter Milchev
Telerik team
answered on 07 Dec 2018, 12:44 PM
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
0
Jenny
Top achievements
Rank 2
answered on 11 Dec 2018, 09:21 AM

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...

0
Peter Milchev
Telerik team
answered on 14 Dec 2018, 09:12 AM
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
Tags
Menu
Asked by
Kiresh
Top achievements
Rank 1
Answers by
A2H
Top achievements
Rank 1
Kiresh
Top achievements
Rank 1
Jenny
Top achievements
Rank 2
Peter Milchev
Telerik team
Share this question
or