New Row At Top With Paging

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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.odata.min.js"></script>
<div class="container">

  <h1>
    FlexGrid New Row With Paging
  </h1>
  <div id="theGrid">
  </div>
  <div id="pager">
    <button id="btnFirst" class="btn"><span class="wj-glyph-step-backward"></span></button>
    <button id="btnPrev" class="btn"><span class="wj-glyph-left"></span></button>
    &nbsp;&nbsp;&nbsp;<span id="spanCurrent"></span>&nbsp;&nbsp;&nbsp;
    <button id="btnNext" class="btn"><span class="wj-glyph-right"></span></button>
    <button id="btnLast" class="btn"><span class="wj-glyph-step-forward"></span></button>
  </div>
  <br>
  <!--<button id="newRow">Add Row</button>-->
</div>

JavaScript

onload = function() {

	// create some random data
	var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
	var products = 'Piano,Violin,Flute,Guitar,Cello'.split(',');
  var data = [];
	for (var i = 0; i < 50; i++) {
  	data.push({
    	id: i,
    	country: countries[i % countries.length],
    	product: products[i % products.length],
    	sales: Math.random() * 10000,
    	expenses: Math.random() * 5000
  	});
	}
  
  // create a FlexGrid with 6 items per page
  var view = new wijmo.collections.CollectionView(data, {
  	pageSize: 6,
    pageChanged: updateCurrentPage
  });
  
  // update pager status
  view.onPageChanged();
  function updateCurrentPage() {
  	var curr = wijmo.format('Page {index:n0} of {cnt:n0}', {
    	index: view.pageIndex + 1,
      cnt: view.pageCount
    });
  	document.getElementById('spanCurrent').textContent = curr;
  }
  
  // Implements button events
  document.getElementById('pager').addEventListener('click', function(e) {
		var btn = wijmo.closest(e.target, 'button');
    var id = btn ? btn.id : '';
  	switch (id) {
    	case 'btnFirst':
				view.moveToFirstPage();
        break;
    	case 'btnPrev':
				view.moveToPreviousPage();
        break;
    	case 'btnNext':
				view.moveToNextPage();
        break;
    	case 'btnLast':
				view.moveToLastPage();
        break;
    }
  });
  
  // show the data in a grid
  var flex = new wijmo.grid.FlexGrid('#theGrid', {
  	itemsSource: view,
    showAlternatingRows: false,
    headersVisibility: 'Column',
    allowAddNew: true,
    newRowAtTop: true,
  });
  
  var buttonRow = document.getElementById('newRow');
  buttonRow.addEventListener('click', addNewRow);
  
  /*function addNewRow() {
  	view.sourceCollection.push({id: null, country: null, product: null, sales: null, expenses: null});
    flex.refresh();
    view.moveToLastPage();
  }*/
}