在 Kendo 网格单元格中居中一个复选框

Question

我在 kendo 网格中使用模板来创建复选框：

 $("#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，只包含复选框和标签。然后使用属性和header属性给单元格和header单元格class命名：

{
    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 和那些 class 个名字来使复选框居中：

  <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，复选框的位置会更好。

在 Kendo 网格单元格中居中一个复选框

Center a checkbox in a Kendo Grid Cell

css

telerik

kendo-ui

kendo-grid