Disable click event on mvc kendo grid containing checkbox

Question

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

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

Appreciated in advance!

Answer 1

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