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

Problem loading menu?

9 Answers 127 Views
Menu
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 16 Mar 2010, 04:25 AM
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"><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"><class="t-link" href="/Auction/Find">Search</a></li><li class="t-item t-state-selected"><class="t-link" href="/Auction/List">Schedule</a></li></ul></li><li class="t-item t-state-default"><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"><class="t-link" href="/Sale/List">Search</a></li><li class="t-item t-state-default"><class="t-link" href="/Sale/Find">Sales</a></li></ul></li><li class="t-item t-state-default"><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"><class="t-link" href="/Account/Login">Login</a></li><li class="t-item t-state-default"><class="t-link" href="/Account/Create">Register</a></li></ul></li><li class="t-item t-state-default"><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"><class="t-link" href="/Company/AboutUs">Company</a></li><li class="t-item t-state-default"><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

9 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 16 Mar 2010, 08:47 AM
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.
0
David
Top achievements
Rank 1
answered on 16 Mar 2010, 10:19 PM
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?
0
Lincoln Quinan
Top achievements
Rank 1
answered on 16 Mar 2010, 10:43 PM
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.


0
David
Top achievements
Rank 1
answered on 17 Mar 2010, 07:18 AM
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.
0
Atanas Korchev
Telerik team
answered on 17 Mar 2010, 08:47 AM
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.
0
David
Top achievements
Rank 1
answered on 17 Mar 2010, 09:41 AM
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.
0
David
Top achievements
Rank 1
answered on 26 Mar 2010, 08:36 PM
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?
0
Accepted
Lincoln Quinan
Top achievements
Rank 1
answered on 26 Mar 2010, 10:58 PM
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
0
David
Top achievements
Rank 1
answered on 03 Apr 2010, 06:46 PM
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
Tags
Menu
Asked by
David
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
David
Top achievements
Rank 1
Lincoln Quinan
Top achievements
Rank 1
Share this question
or