FlexGrid in Angular2

by Joel Parks

HTML

<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.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.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<hello-app></hello-app>

JavaScript

(function() {
	var HelloApp;

	HelloApp = ng
		.Component({
			selector: 'hello-app',
			template: '<h1>FlexGrid in Angular2</h1><div id="firstGrid"></div><div id="secondGrid"></div>'
		})
		.Class({    
			constructor: function() {
      		var firstCountry = 'US,Canada,Mexico'.split(',');
          var secondCountry = 'UK,Germany,Spain'.split(',');
  				var firstData = [];
          var secondData = [];
          var movedRows = [];
          for (i = 0; i < 3; i++) {
		  		  firstData.push({
              id: i, country: firstCountry[i], active: true
            });
            secondData.push({
              id: i, country: secondCountry[i], active: false
            });
          }
          
          var firstView = new wijmo.collections.CollectionView(firstData);
          var secondView = new wijmo.collections.CollectionView(secondData);

				  var firstDiv = document.getElementById('firstGrid');
          var secondDiv = document.getElementById('secondGrid');
          
          
          var firstGrid = new wijmo.grid.FlexGrid(firstDiv, { 
          	columns: [
            	{ binding: 'id', header: 'Country ID' },
              { binding: 'country', header: 'Country Name' },
              { binding: 'active', header: 'Active' },
            ],
            autoGenerateColumns: false,
            itemsSource: firstView,
          });
          var secondGrid = new wijmo.grid.FlexGrid(secondDiv, { 
          	columns: [
            	{ binding: 'id', header: 'Country ID' },
              { binding: 'country', header: 'Country Name' },
              { binding: 'active', header: 'Active' },
            ],
            autoGenerateColumns: false,
            itemsSource: secondView,
          });
          
          secondView.sortDescriptions.push(new wijmo.collections.SortDescription('country',true));
          secondView.refresh();
          
          console.log(firstGrid.rows[0].dataItem);
          console.log(firstGrid.rows[1].dataItem);
         ...