Grid checkbox editor issue with incell editing in Kendo UI for jQuery Grid

Scott

14 posts

Member since:
Oct 2012

Posted 10 Jul 2013 Link to this post

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

1 posts

Member since:
Jun 2013

Posted 12 Jul 2013 Link to this post

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

14 posts

Member since:
Oct 2012

Posted 16 Jul 2013 Link to this post

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

Admin

2206 posts

Posted 18 Jul 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Magnus

2 posts

Member since:
Oct 2012

Posted 31 Jul 2013 Link to this post

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

Admin

2206 posts

Posted 31 Jul 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Magnus

2 posts

Member since:
Oct 2012

Posted 31 Jul 2013 Link to this post

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

3 posts

Member since:
Dec 2013

Posted 12 Feb 2014 Link to this post

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

3 posts

Member since:
Dec 2013

Posted 13 Feb 2014 in reply to Ling Ling Link to this post

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

Robert

18 posts

Member since:
Feb 2014

Posted 22 Jan 2015 in reply to Ling Ling Link to this post

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.

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));