I've got a dgrid and I'm trying to set the cell background color based on the value of the cell using a formatter function and css. The dgrid is located within a div with ID UnMarkedTicketGridDiv
formatter function:
formatPriority: function (item) {
return = "<td class='" + item + "'>" + item + "</td>";
},
css:
#UnMarkedTicketGridDiv td.NORM
{
background-color:Green;
color:Green;
}
Any idea why the cells arent getting colored green? I've verified the formatter function is being called, and there is an item named 'NORM' so that this class is being defined. I think its something with getting the css selector right?
Here's the grid column definition:
grid = new (declare([OnDemandGrid, DijitRegistry]))({
store: gridStore,
columns: {
ID: "ID",
Ticket: "Ticket",
Street: "Address",
DateRcvdInt: { label: "Date Rcvd", formatter: this.formatDate },
WorkDateInt: { label: "Work Date", formatter: this.formatDate },
Priority: { label: "Priority", formatter: this.formatPriority },
Type: "Type",
Company: "Company"
}
Thanks
Generally, the simplest way to do this would be to use renderCell
, which gives you direct access to the cell:
Priority: {
label: "Priority",
renderCell: function (object, value, cell) {
cell.className += " " + value;
return document.createTextNode(value);
}
}
Note that renderCell
can return a node to be placed within the cell. I use createTextNode
rather than just setting innerHTML
since the latter would be potentially susceptible to HTML injection from the data source.