Demo - Row Styling

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    Row Styling</h1>
  <p>
    By default, the grid adds a 'wj-alt' class to every other
    row, and the 'wijmo.css' file uses this class to style
    alternating rows. You can disable this using some custom 
    CSS, but it is often easier just to set the grid's
    <b>showAlternatingRows</b> property to false if you don't
    want alternating row styles applied at all.</p>    
  <p>
    The FlexGrid re-generates rows whenever the data source
    refreshes, which happens when the data is sorted, filtered,
    grouped, or edited. Because of this, you should not expect
    row properties to retain their values in most cases.</p>
  <p>
    If you do want to apply custom styles to rows, you should
    do this when handling the <b>loadedRows</b> event, which 
    fires whenever the grid re-generates the rows.</p>    
  <p>
    The row properties that affect styling are:</p>    
  <ul>
    <li>
      <b>cssClass</b>: Specifies a class name to be added to cells
      in this row. The class name can be used in CSS rules to
      modify the style of cells in this row.</li>
    <li>
      <b>height</b>: Height, in pixels, of the row.</li>
  </ul>
  <p>
    This grid shows the effect of the grid's <b>showAlternatingRows</b>
    and the row's <b>cssClass</b> properties:</p>
    
  <label>
    showAlternatingRows
    <input id="showAlternatingRows" type="checkbox" checked="true">
  </label>    
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin: 10px 0;
}
.wj-cell.high-value {
  font-weight: bold;
  color: green;
  box-shadow: 5px 10px #888888;
}
.wj-cell.low-value {
  font-style: italic;
  color: red;
}
body {
  margin-bottom: 20px;
}

JavaScript

onload = function () {

  // generate some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  		products = 'Phones,Computers,Cameras,Stereos'.split(','),
      data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
    	id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
    });
  }

	// column properties
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
		columns: [
    	{ binding: 'id', header: 'ID', width: 50 },
    	{ binding: 'country', header: 'Country', },
    	{ binding: 'product', header: 'Product', },
    	{ binding: 'sales', header: 'Sales', format: 'c0' },
    	{ binding: 'expenses', header: 'Expenses', format: 'c0' },
		],
    loadedRows: function(s,e) { // apply cssClass to rows after loading them
    	for (var i = 0; i < s.rows.length; i++) {
      	var row = s.rows[i];
        var item = row.dataItem;
        if (item.sales > 6000) {
        	row.cssClass = 'high-value';
        } else if (item.sales < 1000) {
        	row.cssClass = 'low-value';
        }
      }
    },
    itemsSource: data
  });
  
	// toggle showAlternatingRows
  document.getElementById('showAlternatingRows').addEventListener('click', function(e) {
  	theGrid.showAlternatingRows = e.target.checked;
  })

}