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: http://www.gnu.org/copyleft/gpl.html
 */

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

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

            Widget.fn.init.call(that, element, options);
            element = that.element;
            options = that.options;

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

            }
            element.bind(CLICK, $.proxy(that._click, that));
        },
        options:{
            name:"OBButton",
            imageClass:"k-i-custom",
            showImage:true,
            showText:true,
            text:""
        },
        events:[
            CLICK
        ],
        _click:function () {
            this.trigger(CLICK);
        }
    });
    ui.plugin(OBButton);
})(jQuery);

Usage

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:

$("#button1").kendoOBButton({
    imageClass:"k-i-pencil",
    showIcon:true,
    showText:true,
    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:

$("#button2").kendoOBButton({
    imageClass:"k-i-plus",
    showIcon:true,
    showText:false
});

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:

$("#button3").kendoOBButton({
    showIcon:false,
    showText:true
});

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"
   data-role="button"
   data-image-class="k-i-pencil"
   data-show-text="true"
   href="#">Four</a>

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