Kendo UI Grid cell background color

Question

In kendo ui grid how can i change the background color? I've tried to set the template for the column but when the grid is visualized, it's empty without any color. I have this code:

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

};

How can i apply a template to color the background of the cell

Solution 1

how to add conditional cell background?

what it does is: it builds a text row template from all parameters if there is no row template given. it is possible to add template text in most of the parameters like:

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

...

Solution 2

Your code is essentially fine. You can do it as you are doing but the you are not seeing it because the span and the div are empty so the element has 0px width and you cannot see it.

Try doing:

$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>" 
        }
    ]
};

or

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

or even:

$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>"
        }
    ]
};

It is important to note that the content of the span and/or div are not empty: they contain a  .

BUT if you want it colored and no padding / margin, then you can use:

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

Solution 3

If you want to color the whole column, you can add attributes property in the column specification.

For example:

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

And in your .css file you specify the weekend class as:

.weekend{
    background-color: #F7DCAA;
}

More info here