Wijmo 5 FlexGrid with Paging [Vue2]

by goudon

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20182.524/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/interop/vue2/wijmo.vue2.min.js"></script>


<div id="app">
  <h3>
  {{message}}
  </h3>
  <wj-flex-grid :items-source="data"></wj-flex-grid>
  <button v-on:click="data.moveToPreviousPage()">
  Previous Page
  </button>
  {{page}}
  <button v-on:click="data.moveToNextPage()">
  Next Page
  </button>
<input type="text" name="name" size="40"></div>

CSS

#app{
  margin:50px;
}
.wj-flexgrid{
  max-height:500px;
}

JavaScript

new Vue({
  el: '#app',
  updated(){
  this.page +=1 
  },
  data: {
  page:0,
    message: 'Hello Wijmo with Vue2!',
    data: new wijmo.collections.CollectionView(getData(50),{
    	pageSize:10
    })
  }
})

function getData(count) {
	var countries = "US,UK,India,Italy,Japan".split(',');
  var data=[];
  for(var i=0;i<count;i++){
  	data.push({
    	id: i, 
      country:countries[i%countries.length],
      sales:Math.random()*1000,
      downloads:Math.random()*1000
    })
  }
  return data;
}