InCell Editing a checkbox

[Ed]

Hi,

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>";
    else
        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

 

 

 

[Viktor Tachev]

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

https://docs.telerik.com/kendo-ui/knowledge-base/grid-bound-checkbox-editable-column

 

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

 

Regards,
Viktor Tachev
Progress Telerik