センター剣道グリッドセルのチェックボックス

Question

私は、チェックボックスを作成するために、剣道グリッドのテンプレートを使用しています：

$("#grid").kendoGrid({ 
         dataSource: { 
          data: products, 
          schema: { 
           model: { 
            fields: { 
             ProductName: { type: "string" }, 
             UnitPrice: { type: "number" }, 
             UnitsInStock: { type: "number" }, 
             Discontinued: { type: "boolean" } 
            } 
           } 
          }, 
          pageSize: 20 
         }, 
         height: 550, 
         scrollable: true, 
         sortable: true, 
         pageable: { 
          input: true, 
          numeric: false 
         }, 
         columns: [ 
          { 
         field:'<div style="text-align: center"><input id="masterCheck" class="k-checkbox" type="checkbox" /><label class="k-checkbox-label" for="masterCheck"></label></div>', 
         template: '<div style="text-align: center"><input id="${ProductName}" type="checkbox" class="k-checkbox rowSelect"/><label class="k-checkbox-label" for="${ProductName}"></label></div>', 
         headerAttributes:{ style:"text-align:center"}, 
         width: 38, 
         editable: false, 
         sortable: false // may want to make this sortable later. will need to build a custom sorter. 
         }, 
          "ProductName", 
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, 
          { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, 
          { field: "Discontinued", width: "130px" } 
         ] 
        }); 
       }); 

ここでは、コードの道場です：http://dojo.telerik.com/IVopi

あなたがチェックボックスに気付くでしょうグリッドセルの中央に配置されていません。グリッドセルにチェックボックスの中心を合わせるにはどうしたらいいですか？

Answer 1

テンプレートでは、DIVを失い、チェックボックスとラベルだけを含めることができます。次に、セルとヘッダーセルのクラス名を与える属性とheaderAttributesを使用します。

{ 
    field:'<input id="masterCheck" class="k-checkbox" type="checkbox" /><label class="k-checkbox-label" for="masterCheck"></label>', 
    template: '<input id="${ProductName}" type="checkbox" class="k-checkbox rowSelect"/><label class="k-checkbox-label" for="${ProductName}"></label>', 
    headerAttributes:{ 
     "class": "checkbox-header-cell", 
    }, 
    attributes: { 
     "class": "checkbox-cell", 
    }, 
    width: 38, 
    editable: false, 
    sortable: false // may want to make this sortable later. will need to build a custom sorter. 
}, 

今すぐチェックボックスを中央に、これらのクラス名とCSSを使用します。

<style> 
    .checkbox-cell { 
     text-align: center !important; 
     padding: 0 !important;  
    }  
    .checkbox-header-cell {  
     text-align: center !important; 
     padding: 0 !important; 
    } 
    .checkbox-header-cell .k-checkbox-label:before { 
     margin-top: -12px !important; 

    } 
    </style> 

あなたが取得するためにCSSで遊ぶことができますあなたが欲しいものを正確に...

Answer 2

セルの内容を中心にしない理由は、セルそのもの、つまり<td>の要素にはパディングがあります。

グリッドのスタイリングをオーバーライドするか、セルテンプレートの内容に負のマージン値を適用して、このパディングを削除できます。

テンプレートに入力したtext-align: centerスタイルをmargin: -8pxに置き換え、チェックボックスの位置を調整します。