Highlight of the sub menus too

[Suman]

HI ,

I have a main menu and sub menus inside it. While I am on the third lower level of the menu, the 2 topper hierarchy is not highlight. I want the highlight remains as I move in the lower levels of the sub menu.

For example

MY first level of menu is 

ELECTRONICS      FOOD      GAMES

My second level of menu, for example, in case of ELECTRONICS is as below

COMPUTERS    TVs     SOUNDS

My third level of menu, for example, in case of COMPUTERS is as below

LAPTOPS    DESKTOPS   STORAGE

Now, if i am on the page LAPTOPS, only LAPTOPS get highlighted but the above 2, ELECTRONICS and COMPUTERS do not get highlighted.

Please let me know how I highlight all the 3 levels of the menu level

[Vladimir Iliev]

Hi Suman,

 
I tried to reproduce the problem locally but to no avail – when the third level menu item is selected the parents are highlighted. Could you please provide the code of the Menu that the project currently uses – hopefully this will help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
the Telerik team

[Suman]

Thanks for the response.

The code is:


@(Html.Kendo().Menu()
      .Name("Menu")
      .Items(items =>
      {
          items.Add()
              .Text("Add")
              .Items(children =>
               {
                   children.Add().Text("Accident");
                   children.Add().Text("Infringement").Action("InfringementAdd", "InfringementAdd");
                   children.Add().Text("Demerit points").Action("InfringementsDemeritPoints", "InfringementsDemeritPoints");

               });
           
          items.Add().Text("Accidents");          
          items.Add().Text("Infringements").Content(
              @<text>@Ajax.ActionLink("Infringements", "Infringements", "Infringements",
                new AjaxOptions
                {
                    UpdateTargetId = "InfringementMainBucket",
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET"
                    //OnSuccess = "InfringementMainBucket"
                })</text>);
      })
)

[Vladimir Iliev]

Hi Suman,

The provided example is only two-levels Menu (instead of three-levels as you mention in the first post)  and works as expected on our side - currently it's still not clear for us what causes the issue on your side - could you please provide run-able project where the issue is reproduced?

Kind Regards,
Vladimir Iliev
the Telerik team

[S]

I am also having highlighting the menu and sub menu on Kendo for MVC. This doesn't seem to happen automatically and my workaround has always been using jQuery to add "k-state-highlight" to active menu and submenu.

I think it's unnecessary (and it should not need) to add jQuery code to add k-state-highlight or overriding k-state-highlight in CSS in order to get the highlighting works. I start to wonder if this is a bug? If so, where can I report this?

Or maybe even better, you can provide us with jsFiddle or jsBin case to show this is not a bug.

[Vladimir Iliev]

Hi Suhendra,

 
As I mention in my previous reply I tried to reproduce the issue on our side but to no avail - everything is working as expected (please check this screencast). To be able to help please provide runable project where the issue is reproduced - this would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
the Telerik team

[S]

After my last post, I did try to Kendo example to see if I can get same result as your screencast. I did. But, I still run into few issues:

- It works on children menu, but not on the parent menu. See my screencast here: http://www.screencast.com/t/x89x3xT5ZY3v
As you can see in my screencast, the URL match children menu and it's highlighting the selected one. But it doesn't highlight parent menu ("SiteMap Binding" menu on the second row) even though it has same URL.

- When I am using Kendo MVC (in ASP.Net MVC, obviously), it won't work if I have the route to include {id}. For example, my route is {controller}/{action}/{id}. If my URL is "Account/Details", Kendo menu will highlight the selected, but if my URL is "Account/Details/1001", Kendo menu won't highlight the selected. So, it only works if the URL match exactly what I pass to Kendo menu, which how it should be anyway. It's just that most people using Kendo menu won't have exact URL all the time. We put Kendo menu _Layout file, or somekind of master page file. Then include that master file in all other pages.

- Putting these issues on the side, I will have to manually add "k-state-active" to each selected menu. But this is rather a problem from a coding stand point because we will have to pass id of active menu from server to client and add it using jQuery or some other means. But, on my specific case ('specific' because I've never seen it from other example or any other sample I build from scratch to reproduce the issue), I didn't do this. Somehow, Kendo add "k-state-highlight" class to my selected menu. However, 'k-state-highlight' styling is not doing anything, its style is just as if it's not being selected. This is another bug from Kendo CSS files, I think. To this, I have to manually override 'k-state-highlight' to have different background color to indicate it's been highlighted.
Then, there is also 'k-state-selected' class... so, I wonder, for Kendo menu, which one should I use 'k-state-highlight', 'k-statet-active', or 'k-state-selected', or 'k-state-something-else'?

[Vladimir Iliev]

Hi Suman,

 
Please find the answers of your questions below:

1. This is a known issue - the "k-state-highlight" class is added to the parent item correctly, however it's overridden by other kendo styles. Our dev team currently works on this issue and fix will be included in next major release - KendoUI Q1 2013.
2. I tried to reproduce the problem locally but to no avail –  the menu item is highlighted correctly when the URL contain trailing parameters (please check this screencast). For convenience I attached the project from the screencast to the current thread - could you please check it and let me know how it differs from your real setup?

Kind Regards,
Vladimir Iliev
the Telerik team

[S]

Vladimir,

As it was pointed out on another thread, it's probably the browser issue:
http://www.kendoui.com/forums/ui/menu/highlight-selected-item-kendo-web-menu.aspx

John and I did try it on different browsers and the behavior is different between each browser. Have you tried on different browser?