Button

Description

The Button widget provides a theme-able and flexible button

Official Kendo UI Button documentation

Examples

  • Basic Example
  • Passing additional options

This example demonstrates passing a single option to bind against the value of the Button widget.

<button data-bind="kendoButton: increment">Increment</button>
<hr/>
<div data-bind="text: count"> </div>
var ViewModel = function() {
    this.count = ko.observable(0);
    this.increment = function() {
        this.count(this.count() + 1);
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute with clicked now being explicitly specified.

<input type="checkbox" data-bind="checked: enabled" /><br/>
<hr/>
<button data-bind="kendoButton: { clicked: increment, enabled: enabled }">Increment</button>
<hr/>
<div data-bind="text: count"> </div>
var ViewModel = function() {
    this.enabled = ko.observable(true);
    this.count = ko.observable(0);
    this.increment = function() {
        this.count(this.count() + 1);
    };
};

                            ko.applyBindings(new ViewModel());



Live Options

The kendoButton.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
enabled

Determines if users can interact with the button

clicked

Attach a handler to execute when the button is clicked

widget

If specified, will populate an observable with a reference to the actual widget