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

Highlight of the sub menus too

8 Answers 267 Views

Grid

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

8 Answers, 1 is accepted

answered on 11 Dec 2012, 12:29 AM

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

answered on 11 Feb 2013, 04:01 PM

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'?

answered on 13 Feb 2013, 10:29 AM

MenuTest.zip

Hi Suman,

Please find the answers of your questions below:

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!