Wijmo 5 - scroll to cell/row on load

scrollPosition property

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.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">

  <h1>FlexGrid: Scrolling</h1>
  <p>
  scroll to row 100 on intialization
  </p>

  <div id="theGrid"></div>

</div>

CSS

.wj-flexgrid {
  height: 500px;
  margin-bottom:24px  
}

JavaScript

// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  data = [];
for (var i = 0; i < 200; i++) {
  data.push({
    id: i,
    country: countries[i%countries.length],
    downloads: Math.round(Math.random() * 20000),
    sales: Math.random() * 10000,
    expenses: Math.random() * 5000
  });
}

var firstLoad = true;
// initialize a grid
var grid = new wijmo.grid.FlexGrid('#theGrid', {
  itemsSource: data,
  updatedView: function(s, e){
    if(firstLoad){
    	firstLoad = false;
    	var rc = s.cells.getCellBoundingRect(100, 0, true);
    	s.scrollPosition = new wijmo.Point(grid.scrollPosition.x, -rc.top);
    }
  }
});

/*
setTimeout(function(){
	// get cell rect, adjust scrollPosition.y to bring it to the top
	var rc = grid.cells.getCellBoundingRect(100, 0, true);
   grid.scrollPosition = new wijmo.Point(grid.scrollPosition.x, -rc.top);
},100)
*/

/*
// simpler but less efficient
grid.scrollIntoView(grid.rows.length - 1, -1);
setTimeout(function() {
  grid.scrollIntoView(100, -1);
},100)
*/