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
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
Share Improve this question asked May 26, 2014 at 13:50 TomTom 4,08725 gold badges72 silver badges107 bronze badges 1- a span is an inline element, so without content, it'll have 0 width; take a look at this answer: stackoverflow.com/a/20287263/2001735 – Lars Höppner Commented May 26, 2014 at 21:42
4 Answers
Reset to default 8how 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
},
...
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'> </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'> </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"
}
}
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
You can use the [footerStyle] and [headerStyle] attributes to change the grid color, for example
<kendo-grid [data]="gridData">
<kendo-grid-column
field="ContactName"
title="Contact Name"
[width]="150"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
[style]="{'background-color': '#888','color': '#fff'}"
[footerStyle]="{'background-color': '#888','color': '#fff'}"
>
<ng-template kendoGridFooterTemplate>Contacts: 10</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="CompanyName"
title="Company Name"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
>
</kendo-grid-column>
<kendo-grid-column
field="City"
title="City"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
>
</kendo-grid-column>
</kendo-grid>