0

I have column holding the checkbox on a MVC kendo grid. When I click on the column but not on the checkbox, the checkbox position is slipping (moving towards right) and the click event is not delegating to checkbox.

I tried Change event and DataBound to suppress the click even on column but couldn't do it.

Any suggestions to disable the click event on this Kendo Grid checkbox-column or to delegate the column's click event to checkbox!

Below is the code snippet that I have used to build the checkbox column,

columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<input type='checkbox' #= (IsSelected) ? checked='checked' : '' #  id=chk#=(Id)#  class='exclchkbx' />").HtmlAttributes(new { style = "text-align: center;" }).Width(10).HeaderHtmlAttributes(new { style = "text-align:center;" });



Output of my grid column

enter image description here

Dislocated checkbox after clicking the checkbox column (but not on checkbox)

enter image description here

Appreciated in advance!

SharK
  • 2,155
  • 1
  • 20
  • 28

1 Answers1

0

The reason why the checkbox position is slipping is that there is default padding applied. Instead of using the HeaderHtmlAttributes method, you can wrap up the template in a div with text-center as follows:

            columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<div class=\"text-center\"><input type='checkbox' #= (IsSelected) ? checked='checked' : '' #  id=chk#=(Id)#  class='exclchkbx' /></div>");
Ceco Milchev
  • 377
  • 3
  • 11
  • Ceco, thanks for your response. I still see this issue even after surrounding this with the div tag. Pl. share if you have any other thoughts. FYI... I am using the bootstrap styling. – SharK Oct 31 '18 at 17:52