CODEWITHSUNDEEP
javascripthtmlcheckboxkendo-uikendo-grid
saulyasar
saulyasar

Reputation: 815

Customized checkboxes are not clickable in kendo grid

I have kendo grid with checkbox selection column and I customized these checkboxes but now checkboxes are not clickable, cannot be unchecked or checked

How do I solve this?

Here is my code 

@( Html.Kendo().Grid<MockUpForeNet.Controllers.CardDetailController.Days>()
     .Name("timegrid")
     .DataSource(d => d.Ajax().Read("TimeGridBinding", "CardDetail").Model(keys =>
     {
         keys.Id(k => k.DayId);
         keys.Field(c => c.DayName).Editable(false);
         keys.Field(c => c.DayId).Editable(false);
     }).PageSize(7))
               .Columns(c =>
               {
                   c.Bound(p => p.DayId).Width(100).Title(" ").ClientTemplate("#= chk2(data) #").Sortable(false);
                   c.Bound(e => e.DayName).Width("auto").Title("Day");
               })
       .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
       .Sortable()
       .ColumnMenu()
)

here my checkbox template

function chk2(data) {
    return '<input id="masterCheck' + data.DayId + '" class="k-checkbox" type="checkbox" checked="checked" /><label for="masterCheck" class="k-checkbox-label"></label>';
}

Upvotes: 0

Views: 1386

Answers (2)

GaloisGirl
GaloisGirl

Reputation: 1516

You have an error in your template: label for="masterCheck" is missing data.DayId .

Also note that checkboxes have changed in version 2020.1.114 and don't need the empty label anymore. See examples on https://demos.telerik.com/kendo-ui/checkbox/index . Remember to provide an aria-label for accessibility reasons.

Upvotes: 1

Richard
Richard

Reputation: 27508

DayId should be made editable in the DataSource

keys.Field(c => c.DayId).Editable(true);

Upvotes: 0

Related Questions