在剑道网格单元中居中复选框答案

【问题标题】：Center a checkbox in a Kendo Grid Cell在剑道网格单元中居中复选框
【发布时间】：2017-06-17 05:00:11
【问题描述】：

我正在使用剑道网格中的模板来创建复选框：

 $("#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

您会注意到复选框未在网格单元格中居中。如何在网格单元格中将复选框居中？

【问题讨论】：

标签： css kendo-ui telerik kendo-grid

【解决方案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 来获得您想要的内容...

【讨论】：

【解决方案2】：

单元格内容不居中的原因是单元格本身，<td> 元素，有填充。

您可以通过覆盖网格样式或对单元格模板的内容应用负边距值来删除此填充。

将您在模板中输入的text-align: center 样式替换为margin: -8px，复选框的位置会更好。

【讨论】：