Wijmo 5 Test

by Lauri Taipale

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20172.334/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.grid.detail.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.334/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl as vm">
  <wj-flex-grid style="height:560px" items-source="vm.data" selection-mode="Row" initialized="vm.init(s,e)">
  
    <wj-flex-grid-column header="#" binding="row"></wj-flex-grid-column>
  
    <wj-flex-grid-column header="Country" binding="country">
      <wj-flex-grid-cell-template cell-type="CellEdit">
        <wj-auto-complete delay="250" min-length="1" placeholder="Pick a country" items-source-function="vm.findCountry" is-editable="true" selected-value="$value" show-drop-down-button="true">
        </wj-auto-complete>
      </wj-flex-grid-cell-template>
    </wj-flex-grid-column>

    <wj-flex-grid-column header="Val 1" binding="value1"></wj-flex-grid-column>

    <wj-flex-grid-column header="Val 2" binding="value2"></wj-flex-grid-column>

    <wj-flex-grid-column header="Val 3" binding="value3"></wj-flex-grid-column>

    <wj-flex-grid-column header="Val 4" binding="value4"></wj-flex-grid-column>

    <wj-flex-grid-column header="Val 5" binding="value5"></wj-flex-grid-column>

    <wj-flex-grid-column header="Val 6" binding="value6"></wj-flex-grid-column>

    <wj-flex-grid-column header="Date" binding="date">
    </wj-flex-grid-column>

    <wj-flex-grid-detail detail-visibility-mode="ExpandMulti" control="vm.detailProvider" max-height="200">
      <div style="height: 200px !important">
       ...

JavaScript

var app = angular.module('app', ['wj']);

app.controller('appCtrl', function($scope) {
  var vm = this;

  vm.data = new wijmo.collections.ObservableArray([]);
  vm.openDetails = true;

  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');

  /**
   * Adds a new row with random data.
   */
  var addRow = function() {
    var n = vm.data.length + 1;
    vm.data.push({
      row: n,
      country: countries[n % countries.length],
      value1: Math.round(Math.random() * 20000),
      value2: Math.random() * 10000,
      value3: Math.random() * 5000,
      value4: Math.random() * 2000 - 1000,
      value5: Math.random() * 500,
      value6: Math.random() * 3000 - 1500,
      date: new Date(2017, 9, 5)
    });
  };

  // Add some rows.
  for (var i = 0; i < 500; i++) {
    addRow();
  };

  var flex;

  vm.init = function(s, e) {
    flex = s;

    // Select the last row.
    setTimeout(function() {
      // flex.scrollIntoView(flex.rows.length - 1, 0);
      flex.select(new wijmo.grid.CellRange(flex.rows.length - 1, 1), true);
    }, 50);
  };

  /**
   * Adds a new row.
   */
  vm.add = function() {
    flex.focus();
  
    // Add a new row with random data.
    addRow();

    //flex.invalidate();

    var i = flex.rows.length - 1;
    
    // Expand the details if enabled
    vm.openDetails && vm.detailProvider.showDetail(i);
    
    setTimeout(function() {
      // Select the newly added row
      flex.select(new wijmo.grid.CellRange(i, 1), true);
      
      // Try to scroll the *whole* details view into view if expanded by default.
      vm.openDetails && flex.scrollIntoView(i + 1, 0);
    }, 50);
  };
  
  /**
   * Items source function for the country column auto-complete.
   */
  vm.findCountry = function(a, b, callback) {
    setTimeout(function() {
      callback(countries);
    }, 500);
  };  
  
});