Grid checkbox editor issue with incell editing

10 posts, 0 answers
  1. Scott
    Scott avatar
    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.
  2. Sachin
    Sachin avatar
    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);
    };


     
  3. Kendo UI is VS 2017 Ready
  4. Scott
    Scott avatar
    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.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 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!
  6. Magnus
    Magnus avatar
    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?
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 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!
  8. Magnus
    Magnus avatar
    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).
  9. Ling Ling
    Ling Ling avatar
    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.
  10. Ling Ling
    Ling Ling avatar
    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

  11. Robert
    Robert avatar
    16 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));

Back to Top
Kendo UI is VS 2017 Ready