Wijmo 5 - Control and Initialized Attributes

HTML

<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.63/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.grid.filter.min.js"></script>
<!-- this is the grid -->
<div id="gsFlexGrid" style="height:350px"></div>

JavaScript

$(document).ready(function () {
    function getData(count,callBack){
        /* I am Getting Data From Server in this Function and returned back as callbak */
        var fnCallBack = callBack || {};
     var countries = 'United S,Germany,UK,Japan,Italy,Greece'.split(',');
      var data = [];
      for (var i = 0; i < count; i++) {
          data.push({
              id: i,
              country: countries[i % countries.length],
              date: new Date(2014, i % 12, i % 28),
              amount: Math.random() * 10000,
              active: i % 4 === 0
          });
      }
        fnCallBack(data);
     }

      // create the grid and give it some data
      var grid = new wijmo.grid.FlexGrid('#gsFlexGrid');
      /*Observable data Array Which is changed on getting data from server*/
      
      var filter=new wijmo.grid.filter.FlexGridFilter(grid);
      var Obdata = null;
      var cv =null;
      /*Initial Data Setup*/
       getData(10, function (data) {
            Obdata = new wijmo.collections.ObservableArray(data);
            cv = new wijmo.collections.CollectionView(Obdata);
            cv.pageSize = 10;

        });
   
      // initialize  columns collection
       var columnCollection = [];

      var c = {};
      c.binding = 'country';
      c.header = 'Country';
      c.width = '*';
      columnCollection.push(c);

      c = {};
      c.binding = 'date';
      c.header = 'Date';
      c.format = formatFunction();
     columnCollection.push(c);

      c = {};
      c.binding = 'amount';
      c.header = 'Revenue';
      c.format = formatFunction();
      columnCollection.push(c);

      c = {};
      c.binding = 'active';
      c.header = 'Active';
      columnCollection.push(c);
      
      /*Code Written in this for On Scroll Data Loading(Virtual Scrolling) From Server ON Last Scroll Position*/
        grid.onScrollPositionChanged = function () {
            var myDiv = $('#gsFlexGrid').find('div[wj-part="root"]');
           ...