Bootstrap 4 + UI for ASP .NET MVC

[Kyle]

Version: 2018.1.117

I've been trying to use the SASS Theme Builder, Bootstrap 4, and the MVC HTML Helpers to generate a very simple menu.  (I'm starting to wonder if Bootstrap 4 is actually supported by UI for ASP .NET MVC properly.)

Version: 2018.1.117

When the menu renders, it puts the k-state-highlight class on my first text item, but that class does not exist in my two .files (bootstrap.min.css and all.css, downloaded from the SASS Theme Builder).  I'm noticing numerous of these classes are missing from these CSS files.

Html.Kendo().Menu()

    .Name("Menu")
.Items(items =>
                              {
                                  items.Add().ImageUrl("~/Content/about.png").ImageHtmlAttributes(new {style="width:50%;"});
                                  items.Add().Text("Home").Action("Index", "Default").Selected(true);
                                  items.Add().Text("Help").Action("Index", "Help", new { area = "HelpPage" });
                                  items.Add().Text("Disabled item").Enabled(false);
                              }).Deferred()

 

Am I missing a CSS file or am I missing the point?  Can someone guide me in the right direction, please?

[Ivan Zhekov]

Hi, Kyle.

The highlight class is used to denote the item in the menu that responds to the current URL (if any) and is added from HightlightPath feature of menu, tabstrip, panelbar and similar components.

As for the reason it's missing, the sass themes differ a bit from the less themes. Within the themes, there is no notion of highlighted item. I will run it trough our designers and see if we can validate it as a new feature.

Regards,
Ivan Zhekov
Progress Telerik

[Kyle]

Yeah, I've noticed that the SASS themes differ quite a bit from the LESS themes.

Sadly, because of this, I'm having to use more bootstrap 4 than Kendo for the layout objects and will try to use Kendo for things like grid, etc.

[Magdalena]

Hello Kyle,

When kendo menu item is selected, it receives "k-state-selected" class name, not "k-state-highlight". I have downloaded a custom theme from the Theme Builder application, based on the Bootstrap theme, and it works properly on my side. The selected item is styled by the following:

.k-state-selected {
    color: #ffffff;
    background-color: #168f32;
    border-color: #0e5a1f;
}

If the item is not highlighted on our side, it is possible that some other additional CSS rule overwrite this one, or the theme is not applied. Could you please inspect the ".k-item.k-state-selected" menu element, if the style is applied, but overwritten? Looking forward to your reply.

Regards,
Magdalena
Progress Telerik

[Kyle]

Here's something interesting.

If I set .Selected(true) on my static URL to http://google.com, it works properly.  If I set .Selected(true) to my first Action("Index", "Default"), it doesn't select it.  What's the internal logic?

 

Kendo Menu Good.png:

@(Html.Kendo().Menu()
    .Name("Menu")
    .Items(items =>
    {
        items.Add().ImageUrl("~/Content/images/about.png").ImageHtmlAttributes(new {style="width:50%;"});
        items.Add().Text("Home").Action("Index", "Default");
        items.Add().Text("Help").Url("http://google.com").Selected(true);
        items.Add().Text("Disabled item").Enabled(false);
    }).Deferred())

 

Kendo Menu Bad.png:

@(Html.Kendo().Menu()
    .Name("Menu")
    .Items(items =>
    {
        items.Add().ImageUrl("~/Content/images/gimmal.png").ImageHtmlAttributes(new {style="width:50%;"});
        items.Add().Text("Home").Action("Index", "Default").Selected(true);
        items.Add().Text("Help").Url("http://google.com");
        items.Add().Text("Disabled item").Enabled(false);
    }).Deferred())

 

Please also take note in my screenshots that there is indeed a k-state-highlight class.

[Magdalena]

Hi Kyle,

Thank you for the clarification of the scenario. The k-state-highlight class is added to an item that points to the current URL. It is different from selecting an item. Actually this item cannot be selected. If you would like the highlighted item has the same layout as selected item, you can add its selector. For example if the rule of selected item is the following:

.k-state-selected {
    color: #ffffff;
    background-color: #168f32;
    border-color: #0e5a1f;
}

the new CSS rule will be:

.k-state-selected,
.k-state-highlight {
    color: #ffffff;
    background-color: #168f32;
    border-color: #0e5a1f;
}

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Progress Telerik