For certain cells in my grid I want to be able to specify a backcolor. For example for some cells I want them to either show with a green backcolor if they are good, or a red backcolor if the value is bad. The documentation says that the 'rowTemplate' option is deprecated in favor of the column.template option.
So I tried putting a value named "cellCss" in my data that is a css class that I want to apply:
[ {value: 123.4, cellCss: 'positiveBackColor'}, {value: 100.0, cellCss: 'negativeBackColor'} ]
Then I set my column.template to "<span class='${cellCss}'>${value}</span>". It does not insert the css class into the template properly.
If I set the column.template to "<span class='positiveBackColor'>${value}</span>" then it renders the span with a green backcolor, but its not conditional. It also does not fill the entire cell with the backcolor, only behind the text.
What is the proper way to do this in 2014.2?
Is there cellRendering event (an even that is fired before[or after] the TD element is rendered)?
Hello.
I have created a sample for you in order to show you how to use column template to achieve your goal.
Online sample: http://jsfiddle.net/zdravko/h5e3w6kn/show/
Code snippet:
var columnSettings = [ { headerText: "Product Name", key: "ProductName", template: "{{if ${ProductName} == 'Chai' }}<div style='color: red'>" +
"one</div>{{else}}<div style='color: green'>two</div>{{/if}}" } ]; var columnKeys = []; $('#resultGrid').igGrid({ dataSource: northwindProducts, responseDataKey: "results", dataSourceType: "json", width: "100%", autoGenerateColumns: true, columns: columnSettings,
I hope you will find the sample helpful.
Let me know if I may be of further assistance.
Thank you for that example, but what I figured out is that the the template can only use value names that are defined as columns (show that they exist in the dataView).
Okay, let me know If I may be of further assistance.
Thank you for using our controls!