I have a one off situation where I'm not using the kendoGrid to display my data. Instead, I'm displaying my data in a normal HTML table where the rows and columns are static. In this case I've bound my table to viewModel and set the <td> elements as contenteditable:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col">Federal</th>
<th scope="col">State</th>
<th scope="col">Local</th>
<th scope="col">NG</th>
<th scope="col">Other</th>
<th scope="col">Total Projected</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">Full Time</th>
<td contenteditable="true" data-bind="text: viewModel.FederalFullTime"></td>
<td contenteditable="true" data-bind="text: viewModel.StateFullTime"></td>
<td contenteditable="true" data-bind="text: viewModel.LocalFullTime"></td>
<td contenteditable="true" data-bind="text: viewModel.NonGovernmentFullTime"></td>
<td contenteditable="true" data-bind="text: viewModel.OtherFullTime"></td>
<td data-bind="text: viewModel.TotalFullTime"></td>
</tr>
<tr>
<th scope="col">Part Time</th>
<td contenteditable="true" data-bind="text: viewModel.FederalPartTime"></td>
<td contenteditable="true" data-bind="text: viewModel.StatePartTime"></td>
<td contenteditable="true" data-bind="text: viewModel.LocalPartTime"></td>
<td contenteditable="true" data-bind="text: viewModel.NonGovernmentPartTime"></td>
<td contenteditable="true" data-bind="text: viewModel.OtherPartTime"></td>
<td data-bind="text: viewModel.TotalPartTime"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col">Totals</th>
<td data-bind="text: viewModel.TotalFederal"></td>
<td data-bind="text: viewModel.TotalState"></td>
<td data-bind="text: viewModel.TotalLocal"></td>
<td data-bind="text: viewModel.TotalNonGovernment"></td>
<td data-bind="text: viewModel.TotalOther"></td>
<td data-bind="text: viewModel.Total"></td>
</tr>
</tfoot>
</table>
Whenever the template that holds the table is initialized, it shows the data in the cells correctly based on their respective bindings. However it does not update the values in the view model if I change the text of the <td> using the contenteditable feature. I confirmed that the values are not updating by binding the change event of my view model (and it never fires) as well as checking inline via the console:
_viewModel.authorizationInterface.viewModel.bind("change", function (e) {
console.log(e); // Not firing when cell is edited
})
Is there a way to force the view model to update when I edit the text of the cell using contenteditable?