Telerik grid checkbox editor issue with incell editing

Question

Hey I am having issues with the Telerik Grid. As you can see there is a checkbox as a template embeded in my grid.

The problem is that with the template shown above, I can't get the cell to edit when I click on the checkbox shown by the template. Instead, I have to click somewhere else in the cell to enable 'editing' of the cell and then the default editor is showed and I can change the text box.

How can I have a checkbox display that allows the user to perform 'incell' editing with a checkbox and not have the odd behavior of having to click somewhere in the cell (but not on the checkbox) to enable edit mode before the checkbox can be modified?

@(Html.Kendo().Grid<Model>()
            .Columns(columns =>
            {
              columns.Bound(kunde => kunde.Name);
              columns.Bound(kunde => kunde.Street);
              columns.Bound(kunde => kunde.Erledigt).ClientTemplate(
                "<input type='checkbox' disabled='disabled'" +
                    "# if (Erledigt) { #" +
                        "checked='checked'" +
                    "# } #" +
                "/>"
            );

The following JS fiddle shows the problem:

http://jsfiddle.net/cn172/EntQX/2/

Answer 1

If you assign a class name to your checkbox column, you could hook up a click event which handles all clicks on the element with the same class name.

For example your ClientTemplate would become:

.ClientTemplate("<input type='checkbox' #= Erledigt ? checked='checked' : checked='' # class='checkboxColumn' />");

And inside your script, hook up the click event with the following:

<script>
    $(function () {
        $('#NameOfYourGrid').on('click', '.checkboxColumn', function () {
            var checked = $(this).is(':checked');
            var grid = $('#NameOfYourGrid').data().kendoGrid;
            grid.closeCell();
            var dataItem = grid.dataItem($(this).closest('tr'));
            var col = $(this).closest('td');
            grid.editCell(col);
            dataItem.set(grid.columns[col.index()].field, checked);
            grid.closeCell(col);
        });
    });
</script>

Note: For this to work, you will need to assign a Name attribute to your grid, if you have no already done so e.g.:

@(Html.Kendo().Grid<Model>()
    .Name("NameOfYourGrid")
    .Columns(columns => ... columnDefinition