RadMenu ClickToOpen and Close it after MenuItem Clicked

[Kiresh]

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,

[A2H]

Hi,

Please try the below javascript implementation

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

Thanks,
A2H

[Kiresh]

Hi

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

any other way ?
thanks,

[A2H]

Hello,

Please try the below javascript

function onClientItemClicked(sender, eventArgs) {
               sender.close(true);
           }

Thanks,
A2H

[Kiresh]

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,

[A2H]

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

[Kiresh]

Hi,

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

thanks for last step it works fine.


Thanks

[Jenny]

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 

[Peter Milchev]

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

[Jenny]

Thank you so much Peter it is working for me properly

[Jenny]

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

[Jenny]

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

[Peter Milchev]

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

[Jenny]

Hello Peter, 

Thanks a lot now its working properly...

[Jenny]

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

[Peter Milchev]

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

[Jenny]

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

[Peter Milchev]

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