InCell Editing a checkbox

2 posts, 0 answers
  1. Ed
    Ed avatar
    43 posts
    Member since:
    Dec 2019

    Posted 02 Apr 2020 Link to this post


    I have:

    columns.Bound(t => t.IsActive).Width(45)


    .ClientTemplate("#=dirtyField(data,'IsActive')# <input type='checkbox' #=IsActive ? checked='checked':'' # ;/>")

    .HtmlAttributes(new { style = "text-align:center; " });

     with the following javascript which, I believe I got from Telerik

    function dirtyField(data, fieldName)
        var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
        if (data.dirty && data.dirtyFields[fieldName] && hasClass)
            return "<span class='k-dirty'></span>";
            return "";


    It works great if I click on the cell first and then check/uncheck the checkbox.

    However, if I click directly on the checkbox it doesn't flag it as dirty and the changes are not saved.

    Can someone point me in the right direction?

    Thanks … Ed




  2. Viktor Tachev
    Viktor Tachev avatar
    2499 posts

    Posted 06 Apr 2020 Link to this post

    Hello Ed,


    Out of the box the ClientTemplate can be used to customize the way data is presented, it was not designed to edit the underlying data. This is why modifying the checkbox in the ClientTemplate does not change the field of the value. When the cell is clicked first the Grid will place it in edit mode and will show an editor that can alter the value of the relevant field.


    With that said, I would recommend making the checkbox in the ClientTemplate disabled so the users are not confused that it can be used for editing. When the cell is clicked the actual checkbox editor will be shown and can be used to alter the value.


    .ClientTemplate("#=dirtyField(data,'IsActive')# <input type='checkbox' #=IsActive ? checked='checked':'' # ; disabled='disabled'/>")


    Another option is to use the checkbox in the ClientTemplate as an editor. That will require preventing the default editing mechanism and handling the operation manually. Like illustrated in the following example


    The sample uses the KendoUI for jQuery Grid, however, the same logic is applicable for the .NET Core wrappers as well.


    Viktor Tachev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top