使 k-checkbox 在 Kendo UI 网格中可见

Question

使用行数据模板或使用 HTML 作为字段值的列 header，我可以将复选框添加到 Kendo UI网格。例如：

  <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>

但是，复选框的样式并未根据 Kendo UI 主题。将 class="k-checkbox" 添加到输入复选框元素应该根据主题设置样式。但是，当我将 class 应用于复选框时，该复选框不再可见。如何让 k-checkbox 在网格中可见？

问题示例位于 http://dojo.telerik.com/AjuFo

Answer 1

您已将 'k-checkbox' class 添加到复选框，但您忘记将 'k-checkbox-label' class 添加到标签中。这就是为什么在将 'k-checkbox' class 应用于输入元素后它不显示的原因。

请尝试使用以下代码片段。

<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>

如有任何疑问，请告诉我。