Kartik GridView Column Background Color

Yii 2.0 General Discussions
1

Good morning.

I’m needing a little help trying to customize the background color, or font color, of a given column within the Kartik GridView.

My original column was

[
	'attribute' => 'ProfitMarginPercentage', 
	'header' => 'Profit Margin<br>(%)', 
	'headerOptions' => ['class' => 'kv-align-center kv-align-middle'], 
	'format' => ['percent', 2], 
	'contentOptions' => ['class' => 'text-right']
],

I’ve tried all sorts of variations, my latest being

[
	'attribute' => 'ProfitMarginPercentage',
	'value' => function ($model, $key, $index, $widget) {
	    return "<span style='background-color:red'>".$model->ProfitMarginPercentage."</span>";
	},
	'header' => 'Profit Margin<br>(%)', 
	'headerOptions' => ['class' => 'kv-align-center kv-align-middle'], 
	'format' => ['percent', 2], 
	'contentOptions' => ['class' => 'text-right']
],

Can anyone show me the right way to do this?

Right now, I’ve resorted to using jQuery to apply the css, but this is far from ideal and I’d much prefer a proper Yii approach.

Thank you for your assistance!

2

If you want to apply any html/style on value. You must set 'format' => 'raw', because column values are html encoded which trims html/style.

For percentage format you can use asPercent()

[
	'attribute' => 'ProfitMarginPercentage',
	'value' => function ($model, $key, $index, $widget) {
	    return "<span style='background-color:red'>".Yii::$app->formatter->asPercent($model->ProfitMarginPercentage, 2)."</span>";
	},
	'header' => 'Profit Margin<br>(%)', 
	'headerOptions' => ['class' => 'kv-align-center kv-align-middle'], 
	'format' => 'raw', 
	'contentOptions' => ['class' => 'text-right']
],