Demo - Auto-Size Rows

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">
  <div id="theGrid"></div>
</div>
<p>
    <button id="btnSetItemsSource" class="btn btn-default">
      Set New Items Source.
    </button>
  </p>

CSS

.wj-flexgrid {
  max-height: 300px;
}

JavaScript

onload = function() {

	var getData = function()
  {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({
        id: i,
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
      });
    }
    return data;
  }

  // show the data in a grid with fixed height
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    selectionMode:'ListBox',
    columns: [
    	{ binding: 'id', header: 'ID', width: 60, isReadOnly: true },
    	{ binding: 'sales', header: 'Sales' },
    	{ binding: 'expenses', header: 'Expenses' }
    ],
    itemsSource: getData()
  });
  
  document.getElementById('btnSetItemsSource').addEventListener('click', function() {
    theGrid.itemsSource = getData();
  });
}