Buttons

How to apply badge in Kendo UI Mobile Button

Posted by

1

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

Advertisement

How to work with Kendo UI Mobile Buttons

Posted by

0

Learn more about Kendo UI here

In this post we will take a look on working with Kendo UI Mobile buttons and how can we change their icons and styles.

You can create Kendo UI mobile buttons as below,


<a href="#add" data-role="button">Add</a>
 <a href="#home" data-role="button">Home</a>

To create Kendo UI Mobile Button you need to follow following steps,

  • Create anchor tag
  • Set data-role as button
  • Set href as id of the view you want to navigate on click of the button

If you want to call a JavaScript function and execute some code on click of button then you need to set data-click as name of the JavaScript function.


<a data-role="button" data-click="AddFunction">Add</a>
<a href="#home" data-role="button">Home</a>

As you see in above example on click of button Add , JavaScript function AddFunction will be called. Whereas on click of Home button user will be navigated to mobile View with id home.

By default you get buttons rendered as below,

image

You can put style of buttons as well. For example you can set background colour as below,


<a data-role="button" data-click="AddFunction" style="background-color: green">Add</a>
 <a href="#home" data-role="button" style="background-color: red">Home</a>

You will get buttons rendered on mobile view as below,

image

There could be scenario in which you need to render different colours of buttons for android and iOS. Let us say you want blue colour for Android and red for iOS. You can do that by setting button styles in CSS as below,


.km-ios .buttonscolor { background-color: green; }
 .km-android .buttonscolor { background-color: red; }

Above we are overriding default style of Kendo UI Mobile Buttons. And set CSS class of buttons as below,


<a data-role="button" data-click="AddFunction" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" class="buttonscolor">Home</a>

You will get buttons rendered on mobile view as below,

image

You can set icons of buttons as well. Icons can be set by setting data-icon property.


<a data-role="button" data-click="AddFunction" data-icon="add" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" data-icon="home" class="buttonscolor">Home</a>

As you see we set data-icon attribute to add and home respectively. You will get buttons rendered on mobile view as below,

image

You see there are icons rendered on button now. Kendo UI provides you set of icons out of box to use.

image

You can use any of above shown icon by setting data-icon attribute. If you want you can create custom icons and set as button icon as well.

Apart from above icons Kendo UI provides you other set of icons as well. You can use them with their Unicode.

Learn more about Fonts here

So let us say you want to use telephone icon as icon of button then you can use that using the Unicode.


.km-upload:after,
 .km-upload:before
 {
 content: "\e009";
 }

And then you can use upload as value of data-icon attribute of button as given below,


<a data-role="button" data-click="AddFunction" data-icon="upload" >Add</a>
 <a href="#home" data-role="button" data-icon="upload">Home</a>

You will get buttons rendered on mobile view as below,

image

In this way you can take use of Kendo UI Mobile Buttons in your application. I hope you find this poste useful. Thanks for reading.

Learn more about Kendo UI here