Grid checkbox editor issue with incell editing

[Scott]

I am following the post at:

http://www.kendoui.com/forums/kendo-ui-web/grid/display-boolean-field-as-checkbox.aspx

This tells me to use a template to make a boolan value display as a checkbox instead of the words 'true' or 'false'.
I want the default editor (checkbox) to still function while using 'incell' editing.

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?

The following JS fiddle shows the problem:

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

In this fiddle, click on a checkbox in the grid, but nothing happens.  Now click somewhere inside a 'bool val' cell that isn't the checkbox and you'll see the checkbox transform into an editor.  This behavior is confusing to users.

[Sachin]

Hi Scott,

For this, you might have to explicitly call editCell. Can you try as below,

1. Add event handler on click of checkbox.

$("#cashMgmtGrid").kendoGrid({
        dataSource: dataSource,
...
....
columns: [
{ field: "IsChecked", title: "Is Checked", width: "100px", template: '<input type="checkbox" onclick="checkboxClicked(this)" id="IsChecked" #= IsChecked? checked="checked" : "" #  />' }],
...
...
});

2. In event handler, write logic to explicitly editCell.
function checkboxClicked(element) {

var isChecked = element.checked,
cell = $(element).parent(), /* you have to find cell containing check box*/
grid = $("#cashMgmtGrid").data("kendoGrid");
grid.editCell(cell);
};


 

[Scott]

This seems like a very basic function, and no response from the Kendo team.  What  is the proper method to use for this?  A check box with 'incell' editing should not require any odd hoops to make it work correctly.

[Vladimir Iliev]

Hi Scott,

 
I would suggest to check this demo in our CodeLibrary which demonstrates how to create a template column which displays checkboxes for a boolean value and how to change the underlying model with a single click.

Kind Regards,
Vladimir Iliev
Telerik

[Magnus]

The demo solves this problem but it has an issue with the red markers on dirty cells.
They are all cleared as checkboxes are clicked.

Any chance for an updated example that solves this issue?

[Vladimir Iliev]

Hi Magnus,

 
You can modify the click event of the checkboxes to not use the set method of the model in order to avoid redrawing the grid:

$('#persons').on('click', '.chkbx', function () {
    var checked = $(this).is(':checked');
    var grid = $('#persons').data().kendoGrid;
    var dataItem = grid.dataItem($(this).closest('tr'));

    dataItem.IsAdmin = checked;
    dataItem.dirty = true;
})

Kind Regards,
Vladimir Iliev
Telerik

[Magnus]

Hi Vladimir,

thanks for your response!

I was experimenting and found an alternative solution that worked for me.

In the click event handler for '.chkbx' I forced the clicked grid cell into editing mode.
I supplied an eventlistener for the grid edit event and there I inverted the checked status of the newly created checkbox. After that i manually called the set method of the model (from within the grid edit event handler).

[Ling Ling]

I'm having the same issue.  I followed Vladimir Iliev's post by adding the click event, however it still did not show the dirty marker.  I can only get the red marker to show after checking the check box and click off somewhere else in the cell.  Any suggestions? 
Magnus, would you share your code?  thanks in advance.

[Ling Ling]

I found a fix: http://stackoverflow.com/questions/17889049/adding-bindeable-checkbox-column-to-grid

[Robert]

[quote]Ling Ling said:I'm having the same issue.  I followed Vladimir Iliev's post by adding the click event, however it still did not show the dirty marker.  I can only get the red marker to show after checking the check box and click off somewhere else in the cell.  Any suggestions? 
Magnus, would you share your code?  thanks in advance.[/quote]

I realize your post is rather old and you probably have already figured it out, but here is how I did it so that the dirty marker is on the cell after the checkbox is updated.

I added the following lines inside the click method

var td = $(this).parent();

td.addClass('k-dirty-cell');
$('<span class="k-dirty"></span>').insertBefore($(this));