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

preston.m.price picture preston.m.price · Oct 8, 2013 · Viewed 10.6k times · Source

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

Answer

Ryan picture Ryan · Oct 25, 2013

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}"