Edit this page

Click Binding

The Kendo UI Click (click) binding attaches a method of the View-Model to the click DOM event of the target element. The methods is invoked when the user clicks the target DOM element.

Getting Started

Setup

The example below demonstrates how to use the click binding.

Example
<div id="view">
<span data-bind="click: showDescription">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>

<script>
var viewModel = kendo.observable({
    description: "Description",
    isDescriptionShown: false,
    showDescription: function(e) {
        // show the span by setting isDescriptionShown to true
        this.set("isDescriptionShown", true);
    }
});

kendo.bind($("#view"), viewModel);
</script>
 </div>

Events Binding

The click binding is a shorthand for the events binding. The code snippets from the example below are equivalent.

Example
<span data-bind="click: clickHandler"></span>

<span data-bind="events: { click: clickHandler }"></span>

DOM Events and Actions

Access DOM Event Argument

Kendo UI MVVM supplies the DOM event argument wrapped in a jQuery Event object.

Stop DOM Event Bubbling

To stop the event from bubbling up the DOM tree, use the stopPropagation method.

The example below demonstrates how to stop DOM event bubbling.

Example
<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        e.stopPropagation();
    }
});

kendo.bind($("span"), viewModel);
</script>

Prevent Default Actions of DOM Events

For some DOM elements the click event has a default action - for example navigate to another page or submit a form. To prevent the default action use the preventDefault method.

The example below demonstrates how to prevent the default actions of DOM events.

Example
<a href="http://example.com" data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        // stop the browser from navigating to http://example.com
        e.preventDefault();
    }
});

kendo.bind($("a"), viewModel);
</script>

See Also

Other articles on the Kendo UI MVVM component and bindings:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy