Completed
Last Updated: 24 Oct 2019 13:56 by ADMIN
Thomas
Created on: 22 Oct 2019 15:20
Category: UI for Blazor
Type: Bug Report
0
MENU hover not changing background color when using themes through dependency management

On the demo page, when I hover over menu items "Overview" and "Demos" and "Roadmap" it changes background color to gray. When I load it into a project with the verbatim demo code no background color change occurs except on "Roadmap".

 

<TelerikMenu Data="@MenuItems"
             ParentIdField="@nameof(MenuItem.SectionId)"
             IdField="@nameof(MenuItem.Id)"
             TextField="@nameof(MenuItem.Section)">
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }
    public class MenuItem
    {
        public int Id { get; set; }
        public int? SectionId { get; set; }
        public string Section { get; set; }
    }
    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
    {
            new MenuItem()
            {
                Id = 1,
                Section = "Overview"
            },
            new MenuItem()
            {
                Id = 2,
                Section = "Demos"
            },
            new MenuItem()
            {
                Id = 3,
                Section = "Roadmap"
            },
            new MenuItem()
            {
                Id = 4,
                SectionId = 3,
                Section = "What's new"
            },
            new MenuItem()
            {
                Id = 5,
                SectionId = 3,
                Section = "Roadmap"
            },
            new MenuItem()
            {
                Id = 6,
                SectionId = 3,
                Section = "Release History"
            }
        };

        base.OnInitialized();
    }
}
Attached Files:
9 comments
ADMIN
Marin Bratanov
Posted on: 24 Oct 2019 13:56

Hello Thomas,

I have been reviewing this and the @latest moniker should work. In fact, while it didn't work for me properly initially, it started working at some point. There may be some unstability on the side of unpkg but using @latest should generally work. I saw some similar complaints on the net about this and it seems that there is no other solution that "try later).

So, I updated the Themes documentation (diff here) to showcase @latest and to explain how to get version numbers if needed.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Thomas
Posted on: 24 Oct 2019 12:37
Hi Marin, thank you for taking the time for the work-around, it worked great for me.
ADMIN
Marin Bratanov
Posted on: 24 Oct 2019 09:02

Hi Thomas,

While we are investigating this and how it can be improved, I think I have a solution you can use in the meantime - use the latest version of the theme (at the time of writing it is 3.3.8):

 

    {
      "library": "@progress/kendo-theme-material@3.3.8",
      "destination": "wwwroot/css/kendo-themes/material",
      "files": [
        "dist/all.css"
      ]
    }

 

You can monitor the Output window in VS (select the "Library Manager") to see what happens with the dependencies. For some reason unpkg does not resolve the @latest marker when used as a dependency, even though it resolves when used as a CDN.

I will also consider how our documentation can be improved so you can use proper versions.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 23 Oct 2019 15:01

Hello Thomas,

I had just gotten to this and testing it, and it did happen for me too. It is extremely odd and I have sent the case for review by the front-end team that works on the themes and their release cycle. I will get back to you when I have more information.

In the meantime, you can try saving the stylesheet from the CDN and pasting it into a local file, instead of using libman.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Thomas
Posted on: 23 Oct 2019 14:58
Hi Marin, should I be able to create a compatible css file using libman? the cdn version loads very slowly for me. Please see previous comment. Thanks.
Thomas
Posted on: 22 Oct 2019 18:39

I attached a zip of the css that libman built.

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@progress/kendo-theme-material@latest",
      "destination": "wwwroot/css/kendo-themes/material",
      "files": [
        "dist/all.css"
      ]
    }
  ]
}

 

 

Attached Files:
Thomas
Posted on: 22 Oct 2019 17:59
Hi Marin, you are correct about the material css file. I am using libman to build my own. When I switched to the cdn version it worked. Thank you.
ADMIN
Marin Bratanov
Posted on: 22 Oct 2019 16:33

Hello Thomas,

Can you confirm all network requests return successfully in the problematic project? What I see in the video is the Material theme on our demos, but I am not sure what is referenced and fetched on the local project.

I am attaching here a sample project that works fine for me, so you can compare against it and see what is the difference from the problematic project. I am also adding a video of the behavior I get as a reference so you can confirm if I am missing something.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Thomas
Posted on: 22 Oct 2019 15:27
From "Flat Data" demo.