Telerik UI MVVM grid misbehaving with checkboxes

I have a Telerik UI grid I'm using, and I can't get it to quite behave correctly with a Checkbox column.

What I'd like is to have it tie to a field in a Dataset that is boolean. I'd like to edit this item with a Checkbox. And whenever the checkbox is selected or unselected, I'd like to do some math on the row.

I've searched around Stackexchange and found some code bits that help, but it's not 100%. I've created a JSFiddle to demonstrate the odd behavior.

The grid is defined as follows:

<script type="text/x-kendo-template" id="checkboxTemplate">
    <input type="checkbox" #=Discontinued ? checked="checked" : "" # class="chkbx" />
</script>

<div
    id="LineItemsGrid"
    data-role="grid"
    data-editable="true"
    data-bind="source: LineItems"
    style="height: 470px"
    data-navigatable="true"
    data-columns="[
    { 'field': 'Discontinued', 'title':'<center>Discontinued</center>', 'width': 95, 'template': kendo.template($('#checkboxTemplate').html()) },
    { 'field': 'ProductName', 'title':'<center>Product Name</center>', 'width': 90 },
    { 'field': 'UnitPrice', 'title':'<center>Unit Price</center>', 'width': 90 },
        { 'field': 'UnitsInStock', 'title':'<center>Units In Stock</center>', 'width': 90 },
        { 'field': 'TotalInventory', 'title':'<center>Total Inventory</center>', 'width': 90 }
    ]">
</div>

Nothing too fancy. And the javascript to handle the checkboxes is here:

$(document).on('change', 'input:checkbox', function (e) {

    var grid = $("#LineItemsGrid").data("kendoGrid");
    var row = $(this).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = $("td", row).index(this);

    var checkval = $(this).prop("checked");

    var items = LineItemsSource.data();

    // set data - this causes the move to (0,0)
    items[rowIdx].set("Discontinued", checkval);
    if(checkval)
    {
        var total =  items[rowIdx].get("UnitPrice") * items[rowIdx].get("UnitsInStock");
        items[rowIdx].set("TotalInventory",total);
    }
    else
    {
        items[rowIdx].set("TotalInventory",0);
    }
})

If you click on the checkbox, when you .set() the value to the checkbox, it moves the caret to (0,0). And when you click in the cell beside the checkbox, it moves the checkbox a bit to the left and doesn't select it. If you click it at that point it edits and doesn't move to (0,0).

I'm absolutely certain there is a more elegant way of doing this, but I'm having no luck finding any clues about it.