KendoUI: kendoButton widget

How many times did you have to include buttons in your HTML/KendoUI pages? Many!!! But there is no such kendoButton widget (afaik) -even that it is some-sort-of-pretty-easy getting one-.

Here you will find a kendoButton widget for using in your web-pages. Enjoy it!

Source code for kendoButton

This is the JavaScript!!! I’ve tried to be as KendoUI compliant as possible.

 * Copyright (c) 2012. OnaBai Software Solutions.  All rights reserved.
 * If you do not own a commercial license, this file shall be governed by the
 * GNU General Public License (GPL) version 3.
 * For GPL requirements, please review:

(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        CLICK = "click";

    var OBButton = Widget.extend({
        init:function (element, options) {
            var that = this;

  , element, options);
            element = that.element;
            options = that.options;

            var span = $("<span class='k-icon " + options.imageClass + "'></span>");
            if (options.showImage && options.showText) {
                    .addClass("k-button k-button-icontext")
            } else if (options.showImage) {
                    .addClass("k-button k-button-icon")
            } else {
                $(element).addClass("k-button k-button-icontext")

            element.bind(CLICK, $.proxy(that._click, that));
        _click:function () {


You just need to invoke kendoButton with the options object. Valid options are:

  • iconClass: CSS class to add to the button in order to include an image (default value is k-icon-custom).
  • showIcon: Where the icon should be displayed or not (default value is true).
  • showText: Where the text should be displayed or not (default value is true).

There is only one event:

  • click: callback function to execute when button is clicked.

Example: explicit HTML anchor <a> element

The HTML anchor:

<a id="button1" href="#">One</a>

And the JavaScript:

    click:function () {
        alert("button1 clicked");

Where I create a button with icon and text. The icon is the one defined in k-i-pencil (this is a standard KendoUI icon included in their sprites). The text is the one defined in the anchor (One).

Example: explicit HTML button element

The HTML button:

<button id="button2">Second</button>

And the JavaScript:


Where I create a button with icon only. The icon is the one defined in k-i-plus (this is a standard KendoUI icon included in their sprites). The text (Two) is actually not displayed.

Example: explicit HTML input of type button element

The HTML input:

<input id="button3" type="button" value="Three"/>

And the JavaScript:


Where I create a button with text only. The text (Three) is defined in the value attribute.

NOTE: If both showIcon and showText are false, I actually show text anyway.

Example: Declarative

But you can also use declarative. Wow!!! Thanks and congratulations: KendoUI/Telerik!!!

<a id="button4"

Where I set data-role to button. Then I can configure showing text by setting data-show-text to true and show image by setting data-show-image to true. Configuration of the CSS class containing the image can be done by setting data-image-class to the class name.

This four example look like this:

KendoUI kendoOBButton widgets
KendoUI kendoOBButton widgets

Example: More customization

User your own icons in the buttons:

kendoOBButton with custom icon
kendoOBButton with custom icon

Use complex buttons:

kendoOBButton with complex body
kendoOBButton with complex body

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s