How to apply badge in Kendo UI Mobile Button

Learn more about Kendo UI Mobile here

Yes now you can have a default badge on Kendo UI Mobile Button. This was in demand feature and we brought this feature in Q1 2013 SP release.

You can put a badge by setting data-badge attribute of button. After setting badge button will look like below in various platforms.

image

Okay , so we can set badge property as follows. You need to set data-badge attribute.


<a data-role="button" data-badge = "10" data-click="AddFunction">Add</a>

You can access badge value with badge method. So if you need to read current badge value and print it in AddFunction JavaScript function then it can be done as follows.


function AddFunction()
{
 var badgeValue = parseInt(this.badge());

 alert(badgeValue);
}

We are reading badge value with badge() method. That returns a string value and before alerting that we are converting that to integer.

To write value of badge you need to pass a parameter in badge() method. So badge value can be written as below,


function AddFunction()
{
 var badgeValue = parseInt(this.badge());
 badgeValue++;
 this.badge(badgeValue);
 alert(badge);
}

You can remove badge from button by passing false to badge method. So you can remove badge as follows


function AddFunction()
{
 this.badge(false);
}

In this way you can work with badge in Kendo UI Mobile button. I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI Mobile here

Advertisements

One thought on “How to apply badge in Kendo UI Mobile Button

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s