Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Recently Updated

Request a Feature Report a Bug

Completed

Last Updated: 01 Nov 2022 14:34 by ADMIN

There is an issue with setting a Badge value to 0

Created by: Ralph

Comments: 2

Category: Badge

Type: Bug Report

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>

Completed