How to mark Kendo Grid's cell as edited?

Question

I'm dynamically editing some fields using JavaScript. But the problem is Kendo's dataSource doesn't recognize them as changed cells.

Grid's edit mode is InCell.

This is my current JavaScript code:

tablesGrid.tbody.find("input[type='checkbox']").each(function () {
    $(this).on('change', function () {
        var isChecked = $(this).prop('checked');
        var dataItem = tablesGrid.dataItem($(this).closest('tr'));
        var currentTr = $(this).closest('tr');
        var i = $('td:visible', currentTr).index($(this).closest('td'));
        var head = tablesGrid.thead.find('th:visible')[i];
        var headName = $(head).prop('dataset').field;
        tablesGrid.editCell($(this).closest('td'));
        dataItem[headName] = isChecked;
        tablesGrid.refresh();
    });
});

And if you're wondering about this code, I should note that I'm using client template to show checkboxes. But I don't want the user to double click the cell for editing, once to put it in the edit mode, and another one to change the checkbox. I'm not sure if I'm using the right solution, but the JS code works for sure. If I click in the cell and put it in the edit mode, I'll see the change.

@(Html.Kendo().Grid<grid>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.field)
            .ClientTemplate("<input type='checkbox' class='checkbox-inline' #=field? checked='checked':''# />")
            .EditorTemplateName("Checkbox");

Answer 1

Well, the best solution I came up with is to put the cell in edit mode when mouse enters that cell! So instead of the entire JS code in the question, I simply use this.

tablesGrid.bind('dataBound', function () {

    tablesGrid.tbody.find('td').each(function () {
        $(this).mouseenter(function () {
            tablesGrid.editCell(this);
        });
    });
});

Please let me know if you have any better or more efficient way to use editable checkboxes inside a Grid.