FlexGrid -change column color

change color of text in column and column header on button click

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<div id="flex">
</div>
<button id="changeColor">
Change Column Header Color
</button>

CSS

.newClass{
  color:#3333FF !important;
}

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < 10; i++) {
  data.push({
    id: i,
    country: countries[i % countries.length],
    date: new Date(2014, i % 12, i % 28),
    amount: Math.random() * 10000,
    active: i % 4 === 0
  });
}

// create the grid and give it some data
var grid = new wijmo.grid.FlexGrid('#flex');
grid.itemsSource = data;

document.getElementById("changeColor").addEventListener("click", function(){
	
	// change color for rows in column
	/* var column = grid.columns.getColumn('amount');
	  column.cssClass = "newClass";
	  
	  column = grid.columns.getColumn('date');
	  column.cssClass = "newClass"; */
  
  //changeColumnHeaderColor();
  setTimeout(function() { changeColumnHeaderColor(); }, 50);
});

function changeColumnHeaderColor(){
	// change color of columnHeaders
  var panel = grid.columnHeaders; // columnheader panel
  var cell = grid.columnHeaders.getCellElement(0, 3);
  
	if (cell.style.color != "blue"){
		cell.style.color = "blue";
  
  	cell = grid.columnHeaders.getCellElement(0, 2);
  	cell.style.color = "blue";
	} else {
		cell.style.color = "black";
		
		cell = grid.columnHeaders.getCellElement(0, 2);
  	cell.style.color = "black";
	}
}