Navigation problem in Radmenu Click in asp.net c#

[Jenny]

Hello,

I have a radmenu in which when i am clicking on a menu to open it to navigate on other page , the menu item pops up again before it navigate on other page.

Below I have attached a javascript which i have tried to open and close radmenu item:

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);
                     }
                 }

I need to do it like that when i am clicking on any menu item to navigate on another page, menu should not get pop ups. It should stay open till navigate on another page or when i am clicking on menu item to navigate menu should close before navigation. 

Below I have attached a gif from that you will get to know what is the problem.

Kindly, help me with best solution. 

[Marin Bratanov]

Hello Jenny,

You do not need all that extra code in order to have a menu navigate, just setting the NavigateUrl property of the item that must navigate to a new page is enough, because it will render an <a> element with the href attribute that you provided.

Thus, if removing the extra code and upgrading to the latest version do not help you resolve this, I would recommend isolating this into a small runnable example and send it to us in a ticket, like my colleague Peter suggested in the other thread you posted about this.

On a side note, you may find this example useful as well if you are working on transitioning between pages: https://www.telerik.com/support/code-library/page-transition-animation.

Regards,
Marin Bratanov
Progress Telerik

[Jenny]

Hello Marin, 
You are not understanding, what is the problem. 
I having problem with my radmenu. I want it to click to open and not open as you hover. I have set the clicktoopen = "true" already. Now the problem is when i click, it navigate to the respective requested page but the menu doesn't close. 

Code:

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);
                     }
                 }

 

The above code is working for me i want is that when i click on item to navigate to next page that time menu should close.

Please help me with better solution.

[Marin Bratanov]

Hi Jenny,

When the menu items have their NavigateUrl property set, they render <a> elements, and clicking on those triggers the browser web page navigation mechanism - essentially it does a synchronous request for the new page. This means that the current page starts disposing immediately so 

• scripts, objects and DOM nodes start being removed from memory by the browser, therefore functionality in them cannot be guaranteed 
• the UI rendering thread is blocked by the synchronous request so the page is unlikely to get redrawn/reflown anymore

Moreover, handling the item click and having anchors makes the click ambiguous - one gesture means two different things - disposing the current page to go to the next one, and code execution in the current page, which is an obvious contradiction that must be avoided.

Here is an example I made for you that collapses the menu, prevents it from expanding again and navigates the user to the next page if navigation was supposed to happen with JS instead of by allowing the anchor click. I hope it helps you towards our desired outcome

<script>
    function collapseNavigatableItems(sender, args) {
        var url = args.get_item().get_navigateUrl();
        if (url) {
            args.set_cancel();
            sender.add_itemOpening(cancelTelerikEvent);
            sender.close(true);
            setTimeout(function () {
                window.location.href = url;
            }, sender.get_collapseAnimation().get_duration());
        }
    }
    function cancelTelerikEvent(sender, args) {
        args.set_cancel(true);
    }
</script>
<telerik:RadMenu runat="server" ID="rm1" Flow="Vertical" Width="200px" OnClientItemClicking="collapseNavigatableItems" onclientitemop>
    <Items>
        <telerik:RadMenuItem Text="expand me">
            <Items>
                <telerik:RadMenuItem Text="click me" NavigateUrl="default.aspx"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="second dummy item"></telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Regards,
Marin Bratanov
Progress Telerik