Kendo UI网格单元格背景色

Question

在Kendo ui网格中，如何更改背景颜色？我试图为列设置模板，但是当可视化网格时，它是空的，没有任何颜色。我有以下代码：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
              { field: "Colore", title: "Colore", width: "160px", template: "<div><span style='background-color:red'></span></div>" }
             ]

};

我如何应用模板为单元格的背景着色

Answer 1

如何添加条件单元格背景？

它的作用是：如果没有给出行模板，它会根据所有参数构建一个文本行模板。可以在大多数参数中添加模板文本，例如：

...
//},
    columns : [  
            {
                title : 'Questions Translated',
                attributes:{ 'style':"#=questions!==questionsMax?'background-color: red; color:white;':''#" },
                field : "questions",
                width: 140
            },

...

Answer 2

你的代码基本上没问题。您可以按照自己的方式进行操作，但是您看不到它，因为 thespan和 thediv是空的，因此元素具有0px宽度而您看不到它。

尝试做：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
        { 
            field: "Colore", 
            title: "Colore", 
            width: "160px", 
            template: "<div><span style='background-color:red'>This is a test</span></div>" 
        }
    ]
};

或者

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
        { 
            field: "Colore", 
            title: "Colore", 
            width: "160px", 
            template: "<div style='background-color:red'>&nbsp;</div>"
        }
    ]
};

甚至：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    columns: [
        { 
            field: "Colore", 
            title: "Colore", 
            width: "160px", 
            template: "<span style='float: left; width: 100%; background-color:red'>&nbsp;</div>"
        }
    ]
};

重要的是要注意span和/或的内容div不为空：它们包含一个 .

但是如果你想要它有颜色并且没有填充/边距，那么你可以使用：

{ 
    field: "Colore", 
    title: "Colore", 
    width: "160px", 
    attributes: {
        style: "background-color: red"
    }
}

Answer 3

如果要为整个列着色，可以attributes在列规范中添加属性。

例如：

columns: [
    { 
        field: "Colore", 
        title: "Colore", 
        width: "160px", 
        attributes: {
            "class": "weekend"
        }
    }
]

在您的 .css 文件中，您将周末课程指定为：

.weekend{
    background-color: #F7DCAA;
}

更多信息请点击此处