Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 01 Nov 2022 14:34 by ADMIN
Ralph
Created on: 08 Mar 2020 14:44
Category: Badge
Type: Bug Report
0
There is an issue with setting a Badge value to 0

I was working with a badge widget and I noticed an issue when the value property is specified as 0. It does not change the value displayed in the badge. I have attached a snippet based on the Basic usage demo for a Badge. I originally noticed it because I'm using the badge in MVVM pattern.

 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/badge/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css" />

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

</head>
<body>
<div id="example">
    <div class="demo-section k-content">
        <div id="toolbar"></div>
    </div>
    <script>

        $("#toolbar").kendoToolBar({
            items: [
                {
                    template: '<a class="k-button k-badge-overlay" href="#"><span class="k-icon k-i-user"></span><span id="badge-overlay">2</span></a>'
                },
                {
                    template: '<a class="k-button k-badge-overlay" href="#"><span class="k-icon k-i-email"></span><span id="badge-inbox">5</span></a>'
                },
                {
                    template: '<a class="k-button" href="#">See later <span id="badge-sent">15</span></a>'
                },
                {
                    template: '<a class="k-button" href="#">News<span id="badge-missed">99+</span></a>'
                }

            ]
        });

        $('#badge-inbox').kendoBadge({
            type: 'info',
            appearance: 'rectangle'
        })

        $('#badge-sent').kendoBadge({
            type: 'success',
            appearance: 'rectangle'
        })

        $('#badge-missed').kendoBadge({
            type: 'warning',
            value: 0, /*The span has an original value specified in HTML. When it is run, the value doesn't change unless you change it to something other than 0, i.e. 10*/
            appearance: 'rectangle'
        })

        $('#badge-overlay').kendoBadge({
            type: 'primary'
        })
    </script>
    <style>
        #toolbar {
            display: flex;
            justify-content: center;
            height: 80px;
        }

        #example a{
            margin-left: 5px;
        }

        #example .k-icon {
            font-size: 20px;
        }
    </style>
</div>


</body>
</html>
2 comments
ADMIN
Peter Milchev
Posted on: 01 Nov 2022 14:34

Hello,

The issue is fixed in the latest version.

The API is updated and the "text" property should be used instead of "value".

Regards,
Peter Milchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Georgi
Posted on: 13 Mar 2020 09:27

Hello Ralph,

Thank you for pointing out this issue. We will provide a fix as soon as possible.

In the meantime, as a workaround I can suggest you to use the string equivalent - "0";

e.g.

            type: 'warning',
            value: '0',
            appearance: 'rectangle'
        })

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category