checkbox column in grid

[Jenny]

i have a grid with one checkbox column bound to a dataitem. what i just want to do is when you click the checkbox to check/uncheck, it will update the data item.

i've tried copying the sample provided here: https://dojo.telerik.com/ozoHUwUP/5 but the onchange event is not triggered

                                        columns.Bound(p => p.IsApproved).ClientTemplate("<input type='checkbox' class='chkbx k-checkbox' onclick='check()' #= IsApproved ? checked='checked' :'' # #=dirtyField(data,'IsApproved')#/>")

                                    .Title("Approved?").Width(150);

 

[Ivaylo]

Hello Jenny,

Thank you for the code snippet and the details provided. 

It would be a good idea to use the onclick attribute on the checkbox and pass this as a parameter to a function. This way, the function can directly work with the specific checkbox that was clicked.

columns.Bound(p => p.Approved).ClientTemplate("<input type='checkbox' class='chkbx k-checkbox k-checkbox-lg k-rounded-lg' onclick='check(this)' #= Approved ? checked='checked' :'' # #=dirtyField(data,'IsApproved')#/>");

In the "check" function, you should retrieve the "dataItem" associated with the row containing the checkbox and update the "Approved" property accordingly.

function check(element) {
    var grid = $('#grid').data('kendoGrid');
    var row = $(element).closest('tr');
    var dataItem = grid.dataItem(row);

    dataItem.set("Approved", element.checked);
}

In addition, I prepared a sample app with the implementation. The app is attached to this reply. Let me know if this is the desired behavior.

 

Regards,
Ivaylo
Progress Telerik