剣道UIグリッド内でk-チェックボックスを表示する

Question

フィールドデータとしてHTMLを使用する行データまたは列ヘッダーのテンプレートを使用して、剣道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> 

ただし、チェックボックスは剣道のUIテーマに従ってスタイルされていません。入力checkbox要素にclass = "k-checkbox"を追加するとテーマに合わせてスタイルを設定する必要があります。ただし、クラスをチェックボックスに適用すると、チェックボックスは表示されなくなります。グリッド内にk-チェックボックスを表示するにはどうすればよいですか？問題の例はhttp://dojo.telerik.com/AjuFo

Answer 1

に位置しています

あなたは、チェックボックスに「K-チェックボックス」クラスを追加しているが、あなたは、ラベルに「K-チェックボックスラベル」クラスを追加するのを忘れ。そのため、 'k-checkbox'クラスを入力要素に適用した後、その要素が表示されません。

次のコードスニペットを試してください。

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

懸念があれば教えてください。