Make k-checkbox visible within a Kendo UI Grid

Question

Using a template for row data or for a column header using HTML as the value of the field, I can add a checkbox to a Kendo UI grid. For example:

  <div id="grid"></div>
  <script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
        columns: [{
            field:'<input id="masterCheck" type="checkbox" /><label for="masterCheck"></label>', 
          width: 33,  
          height: 550,
            }] 
        });
      });
    </script>

However, the checkbox is not styled according to the Kendo UI theme though. Adding class="k-checkbox" to the input checkbox element should style it according to theme. However, when I apply the class to the checkbox, the checkbox is no longer visible. How can I have a k-checkbox be visible within the grid?

An example of the issue is located at http://dojo.telerik.com/AjuFo

Answer 1

You have added the 'k-checkbox' class to the checkbox but you forgot to add the 'k-checkbox-label' class into the label. That's why after applying the 'k-checkbox' class to the input element its not displaying.

Please try with the below code snippet.

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
        columns: [{
            field:'<input id="masterCheck" class="k-checkbox" type="checkbox" /><label for="masterCheck" class="k-checkbox-label"></label>', 
          width: 33,  
          height: 550,
            }] 
        });
      });
    </script>

Let me know if any concern.