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，只需包含复选框和标签。然后使用attributes和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，并且该复选框的定位更佳。

将一个复选框置于Kendo Grid Cell中

2 个答案: