Problem loading menu?

[David]

I suspect that I am loading the js or css files in the wrong order or just doing something dumb, but after getting the grid working in no time at all I am starting to suspect I am just missing the mark here. 

Here is the call from a div on my site.master, the code from the ascx file and the html output
[1]
<% Html.RenderPartial("MainMenu"); %>

[2]

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
        <% Html.Telerik().Menu()
                    .Name("Menu")
                    .Items(menu =>
                    {
                        menu.Add()
                            .Text("Auctions")
                            .ImageUrl("~/Content/Images/hammer.png")
                            .Items(item =>
                            {
                                item.Add().Text("Search").Url("~/Auction/Find");
                                item.Add().Text("Schedule").Url("~/Auction/List");
                            });

                        menu.Add()
                            .Text("Buy Now!")
                            .Items(item =>
                            {
                                item.Add().Text("Search").Url("~/Sale/List");
                                item.Add().Text("Sales").Url("~/Sale/Find");
                            });

                        menu.Add()
                            .Text("Registration")
                            .Items(item =>
                            {
                                item.Add().Text("Login").Url("~/Account/Login");
                                item.Add().Text("Register").Url("~/Account/Create");
                            });

                        menu.Add()
                            .Text("About Us")
                            .Items(item =>
                            {
                                item.Add().Text("Company").Url("~/Company/AboutUs");
                                item.Add().Text("Contact Us").Url("~/Company/ContactUs");
                            });
                    })
                    .Render();
                %>

[3]

<!----- main navigation placeholder ---->

<ul class="t-widget t-reset t-header t-menu" id="Menu"><li class="t-item t-highlighted t-state-default"><a class="t-link" href="#"><img alt="" class="t-image" src="/Content/Images/hammer.png">Auctions<span class="t-icon t-arrow-down"></span></a><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Auction/Find">Search</a></li><li class="t-item t-state-selected"><a class="t-link" href="/Auction/List">Schedule</a></li></ul></li><li class="t-item t-state-default"><a class="t-link" href="#">Buy Now!<span class="t-icon t-arrow-down"></span></a><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Sale/List">Search</a></li><li class="t-item t-state-default"><a class="t-link" href="/Sale/Find">Sales</a></li></ul></li><li class="t-item t-state-default"><a class="t-link" href="#">Registration<span class="t-icon t-arrow-down"></span></a><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Account/Login">Login</a></li><li class="t-item t-state-default"><a class="t-link" href="/Account/Create">Register</a></li></ul></li><li class="t-item t-state-default"><a class="t-link" href="#">About Us<span class="t-icon t-arrow-down"></span></a><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Company/AboutUs">Company</a></li><li class="t-item t-state-default"><a class="t-link" href="/Company/ContactUs">Contact Us</a></li></ul></li></ul>

It loads and looks okay, but no hover or sub-menus?

Thanks for any help on this, dave

[Atanas Korchev]

Hello David,

I suggest you check the troubleshooting help article. I suspect a ScriptRegistrar is missing or the JavaScript files of the menu didn't load properly.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David]

Yeah, I read that article before I posted and tried to use the script registrar but it crashed my jquery cycle plug-in.  Even when I remove the cycle script, it still doesn't get me any further than declaring the scripts manually.

Do I really have to mess with complications of the registrar to do a simple two-level menu?

[Lincoln Quinan]

I have an app that uses external js too.

I don't know if this is the best way to do that, but here we go:

A have a class with static methods (Extensions):

public static string Script(this HtmlHelper helper, string fileName)
    {
        TagBuilder builder = new TagBuilder("script");
        builder.MergeAttribute("type", "text/javascript");
        builder.MergeAttribute("language", "javascript");
        builder.MergeAttribute("src", GetAbsolutePath(HttpContext.Current, "Scripts/{0}".FormatWith(fileName)));
        return builder.ToString();
    }

    public static string Stylesheet(this HtmlHelper helper, string fileName)
    {
        TagBuilder builder = new TagBuilder("link");
        builder.MergeAttribute("rel", "stylesheet");
        builder.MergeAttribute("type", "text/css");
        builder.MergeAttribute("href", GetAbsolutePath(HttpContext.Current, "Content/StyleSheets/{0}".FormatWith(fileName)));
        return builder.ToString();
    }

then I add my scripts and stylesheets on my master page:

<head runat="server">
    <%= Html.Script("jquery-1.4.2.js")%>
    <%= Html.Script("jquery.cookie.js")%>
    <%= Html.Script("jquery.livequery.js")%>
    <%= Html.Script("jquery.orangevolt-focused.js")%>
    <%= Html.Script("jquery.hoverIntent.js")%>
    <%= Html.Script("jquery-ui-1.7.2.custom.min.js")%>
    <%= Html.Script("i18n/ui.datepicker-pt-BR.js")%>
    <%= Html.Script("i18n/ui.datepicker-en-US.js")%>
    <%= Html.Script("jquery.meio-mask.js")%>
    <%= Html.Script("jquery.autocomplete.js")%>

    <script language="javascript" type="text/javascript">
    $(function(){
        function show() {
            var menu = $(this);
            menu.children(".actions").slideDown();
        }

        function hide() {
            var menu = $(this);
            menu.children(".actions").slideUp();
        }

        $(".hover-menu").hoverIntent({
            sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
            interval: 50,   // number = milliseconds for onMouseOver polling interval
            over: show,     // function = onMouseOver callback (required)
            timeout: 300,   // number = milliseconds delay before onMouseOut
            out: hide       // function = onMouseOut callback (required)
        });

        $('input:text').setMask();

        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true
        });

    function changeLang(lang) {
         $.cookie('lang', lang);
         window.location.reload();
         return false;
     }
    </script>

</head>

And then, in the end of the page, I load the Telerik JSs:

 </div>
    <%= Html.Telerik().ScriptRegistrar().jQuery(false) %>
</body>
</html>

Works like a charm for me.
Hope it helps.

[David]

Thanks for the response Lincoln, but it seems like this is more of a workaround than a resolution of my problem.

I am switching to a simpler jquery menu (major time crunch right now) , but will give this another try later.

[Atanas Korchev]

Hello David,

Actually this is not a workaround at all. If other jquery plugins need the jquery script to be included at the top of the page you should use the jQuery(false) method of the ScriptRegistrar. The Telerik component will not work without a ScriptRegistrar in the page though. It needs it to output its JavaScript initialization code. The other option is to manually write that JavaScript:

jQuery('#Menu').tMenu();

Where "Menu" is the value you have set using the Name method.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David]

I tinkered with the .jquery(false) option earlier and it did get me a little further along (my visited links are changing colors indicating that a css switch has been made), but still no luck.

[David]

I am bumping this back up (found z-index solution from another thread and menu functions now) because I have one small problem left.

The sub-menus are staying open after they lose focus.  There are a few threads going on this, but they don't offer a solution to what is happening to me.

My test site is up  if you need to see the problem in practice...  http://murphywebauction.com/

Anybody else run into this?

[Lincoln Quinan]

I have tested your Menu, and seems that the problem is the function that closes the menu.

If you pass the mouse over the first item of the menu and then move the mouse up, the menu will close, but when you move the mouse out passing by another item than the first, the menu stays open. Check the close function on the js files

[David]

Hi Lincoln, you were right it was the close (in this case, mouseleave) function - the fix is here, but thanks for steering me in the right direction.

link to fix:  http://www.telerik.com/community/forums/reply-thread.aspx?messageId=0&threadId=290480

take care, dave