When I click a checkbox in the knockout table row, the tr click event overrides the state change of the checkbox
I have a knockout table with checkboxes (for the example here, I limited myself to one checkbox per row). when the checkbox is clicked, it should flip the state (as you would expect). however I also have a click event and select an event in the table row that conflicts with the checkboxes ...
<table>
<tbody data-bind="foreach: namespace.divResults.model">
<tr data-bind="click: $root.selectItem, css: {selected: $root.isSelected($data)}">
<td data-bind="text: Title"></td>
<td data-bind="text: Surname"></td>
<td data-bind="text: PostCode"></td>
<td><input type="checkbox" data-bind="checked: Excluded, click: $root.toggleExcluded"></td>
<td data-bind="text: Notes" style="display:none"></td>
<tr>
<tbody>
<table>
<div>
<!-- ko with: $root.selectedItem -->
<textarea data-bind="textInput:Notes"></textarea>
</div>
and javascript:
(function(ns) {
ns.divResults = null;
var resultsViewModel = function() {
var self = this;
self.model = ko.observableArray();
self.selectedItem = ko.observable();
self.selectItem = function(row){ self.selectedItem(row); }
self.isSelected = function (row) { return self.selectedItem() === row; }
self.toggleExcluded = function() {
return true;
}
}
}
I tried to use the clickBubble event, but that blocks the click event actions on the table row, which works great anyway. What I find is that clicking on the row flag changes its state correctly, but then returns when the row click does its thing.
source to share
I used an actual checkbox, not sure if this is your requirement or not, anyway, this is a checkbox column
<td>
<input type="checkbox" data-bind="checked: Excluded"/>
</td>
The presence of a checkbox with an anchor checked has to do with setting the Excluded checkbox and simultaneously checking the checkbox. In the row click handler I return true to allow the event to propagate to this checkbox, without this the checkbox won't work because the event won't propagate to it
self.selectItem = function (row) {
self.selectedItem(row);
return true;
};
Here is a fiddle with a working example, I added an input at the bottom that also shows the Excluded status
source to share