Kendo UI - How to bind checked property (attribute) and handle click event for the checkbox to the viewModel using Kendo MVVM

Question

I have a page that looks something like:

<div data-role="view" id="side-root" data-title="Check-Boxes" data-model="myViewModel">
  <ul data-title="People" data-role="listview" data-bind="source: dsPeople" data-template="person_list_item" data-style="inset"></ul>
</div>
<script id="person_list_item" type="text/x-kendo-template">
  <label>
    <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
<input type="checkbox" data-bind="checked: isChecked, click: clickHandler"/>
  </label>
</script>

Now, the MVVM binding to the isChecked fields works correctly, but the clickHandler is never invoked. If I remove the "checked: isChecked" binding from the data-bind value then the clickHandler gets invoked.

I have also tried setting up the data-bind for the checkbox like:

data-bind="checked: isChecked, events: { click: clickHandler }"

with the same behavior.

Is this by design, or have I mis-configured something?

Thanks

score 6 · Answer 1 · answered Oct 24 '13 at 23:17

6

Try using the change event instead. I hit this same problem and that solves it. I guess you can't data-bind to checked and also bind to the click event.

data-bind="checked: Checked, events: { change: clickHandler}"

answered Oct 24 '13 at 23:17

Ryan

297
1
2
7

If you do this you will get an error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'apply'. You can't use MVVM to bind event handlers to HTML objects. You can include the HTML onclick= event handler or bind to the Observable's (ViewModel) change event (and then check which field fired it). – Will Aug 01 '16 at 12:00

score 2 · Answer 2 · answered Sep 28 '17 at 07:07

Here is the DEMO to handle checkbox click / change event

HTML:

<input type="checkbox" data-bind="checked: checkboxChecked, events: { change: clickHandler}">
         Click the checkbox to view change event, also keep your console open

JS:

var viewModel = kendo.observable({
  checkboxChecked: true,
  clickHandler: function(e) {
    console.log('clicked ', e);
    alert("Checkbox checked = "+e.data.checkboxChecked);
  }
});
kendo.bind($("#example"), viewModel);

Kendo UI - How to bind checked property (attribute) and handle click event for the checkbox to the viewModel using Kendo MVVM

2 Answers2