mesosteros mesosteros - 1 year ago 133
Javascript Question

Kendo UI Grid and ng-style

I have a Kendo UI Grid in angular which is reading from my datasource a series of properties.
One of them contains a color string. I want to use said color string to set the background-color for a square-box in the grid.

I'm using the following template for the box:

template: "<img class='alarm-box-prediction variable' ng-style={'background-color': dataItem.type}'></img>"

The relevant data from my dataSource is the following:

dataSource: {
dataSource: function(data) {
// Map the stored properties in the data array of objects received to
// their corresponding columns in the Grid
return $.map(data, function(alarmProperty) {
return {
// Change array index to match API once we are getting data from there
type: alarmProperty[0],
//... there are more properties here but i removed them as they are not the focus

The data relevant from the JSON file which is currently serving as my DS (will be changed soon though) is:

"alarms": [
"type": "Yellow",

Empty alarm boxes

This is what I want as a result:

alarms filled

Answer Source

Found out the issue. ng-style needs to be formatted differently because it is being passed as a string to kendo.

template: "<img class='alarm-box-prediction variable' ng-style=\"{'background-color':dataItem.type}\"></img>",
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download