Badge Placement missing

[AP]

I've just upgraded to version 2020.3.915 of the framework, from version 2020.2.513, and the button badges have broken.

The original code was:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Value((string)ViewBag.NoToReview).Type("error").Visible((bool)ViewBag.ReviewBadge).Shape(BadgeShape.Circle)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

This now throws an error:-

ButtonBadgeSettingsBuilder' does not contain a definition for 'Value' and the best extension method overload 'ValueExtensions.Value(HtmlHelper, string)' requires a receiver of type 'HtmlHelper'

I have modified the code to:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Text((string)ViewBag.NoToReview).Visible((bool)ViewBag.ReviewBadge).Shape(BadgeShape.Circle).ThemeColor(BadgeColor.Warning).Position(BadgePosition.Outside)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

However the badge colour isn't red (this doesn't seem to change whatever the ThemeColor setting), and the badge placement is within the button, and not on the upper right corner as before.

The documentation and other forum posts mention a button placement option, but this is missing from the intellisense options shown, and the documentation entry for this is now missing.

I need the badges to be red, and overlapping the top-right button corner as before. How can I achieve this?

[Neli]

Hello Andrew,

Thank you very much for reporting incorrect behavior. 

There were some changes in the Badge configuration options introduced with the R3 2020 release. Please find below a link to the respective Breaking Changes section:

- https://docs.telerik.com/aspnet-mvc/backwards-compatibility/2020-backwards-compatibility#telerik-ui-for-aspnet-mvc-r3-2020

However, the issue with the Badge in a Button that is not changing its color correctly turned out to be a bug on our side. Based on your report I logged a new bug report on your behalf in our official Feedback Portal. You will find a link to it below:

- https://feedback.telerik.com/aspnet-mvc/1491757-when-badge-is-in-a-button-themecolor-does-not-take-effect-in-asp-net-mvc

In the meantime, while the issue is being fixed, as a workaround I would suggest you set the needed color manually. In your scenario you could use the 'k-badge-secondary' class as in the example below:

<style>
    .k-badge-secondary {
            background-color: red !important;
    }
</style>

As a small sign of gratitude for reporting incorrect behavior, your Telerik points are now updated.

Regards,
Neli
Progress Telerik

[AP]

Thanks for this. However how do I get the badges to display as they did, overlapping the top-right corner of the button?

Without a placement option, this now seems impossible.

I have tried all the position options without success.

[Neli]

Hi Andrew,

After the changes introduced with the R3 2020 release, the badge could be aligned by using the align option. You could set the badge to be rendered in the top right corner of the button by setting the align option to "top end" as in the example below:

@(Html.Kendo().Button().Name("reviewButton")
        .Content("Review")
        .Badge(b => b.Text("test")
            .Shape(BadgeShape.Circle)
            .Align(BadgeAlign.TopEnd)
            .ThemeColor(BadgeColor.Error))
)

 I hope, that the above helps you. In case you have any other questions, please do not hesitate to contact us.

 

Regards,
Neli
Progress Telerik

[AP]

Neli,  I've now tried this, but it doesn't work.  My code is:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Text((string)ViewBag.NoToReview).Visible((bool)ViewBag.ReviewBadge).Shape(BadgeShape.Circle).ThemeColor(BadgeColor.Warning).Align(BadgeAlign.TopEnd)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

 

The badge is still shown directly after the button test (image attached)

 

 

[Neli]

Hi Andrew,

I have tested locally in a sample UI for ASP.NET MVC project. You could see the appearance on my end in the screencast here.

Attached you will find a sample project with a Badge in a Button based on the provided snippet. Please let me know if I am missing something? Could you please try to modify the sample in order to replicate the appearance of the way it is at your end and send it back to us? This way we could take a closer look and advise you further. 

Looking forward to your reply.

Regards,
Neli
Progress Telerik

[AP]

Neli,

 

It seems to be an issue with the css files. You are using kendo.bootstrap-v4.min.css and I am using:-

<link href="@Url.Content("~/Content/kendo/2020.3.915/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />



<link href="@Url.Content("~/Content/kendo/2020.3.915/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />

You're also using 2020.3.1021, and I'm using 2020.3.915, would using 1021 fix my problem?

 

[Neli]

Hello Andrew,

I have tested locally and I managed to replicate the described appearance by changing the version to 2020.3.915 and using the Bootstrap Less Theme. The issue could be replicated with some of the Less themes in the previous version. However, the issue is resolved with version 2020.3.1021. I would suggest you upgrade to the latest version and check the behavior. You could test the appearance by referencing the client side resources from CDN.

 

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>

I hope this helps.

Regards,
Neli
Progress Telerik

[AP]

Sorry for the delay. That has now fixed the issue.