Wijmo 5 [Flex Grid]

Flexgrid inside popup with dropdown

by Joel Parks

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
   <h2>
     314560
   </h2>
  <button id="thePopup">Show Pop Up</button>
  <wj-popup owner="#thePopup" is-resizable="true" show-trigger="Click" hide-trigger="None" style="width:600px;height:500px;padding:20px;" modal="true">
  
    Flex Grid with Data Mapping
    <wj-flex-grid items-source="data" selection-mode="Row" items-source-changed="itemsSourceChanged(s,e)">
      <wj-flex-grid-filter></wj-flex-grid-filter>
      <wj-flex-grid-column header="The List of States" binding="code" data-map="stateMap" word-wrap="true"></wj-flex-grid-column>
      <wj-flex-grid-column header="City" binding="city"></wj-flex-grid-column>
      <wj-flex-grid-column header="Population" binding="pop"></wj-flex-grid-column>
    </wj-flex-grid>
    
    Flex Grid with combo box
    <wj-flex-grid items-source="dataDropDown">
      <wj-flex-grid-column header="id" binding="id"></wj-flex-grid-column>
      <wj-flex-grid-column header="country" binding="country">
        <wj-flex-grid-cell-template cell-type="CellEdit">
          <wj-combo-box items-source="country" selected-value="$value"></wj-combo-box>
        </wj-flex-grid-cell-template>
      </wj-flex-grid-column>
      <wj-flex-grid-column header="date" binding="date"></wj-flex-grid-column>
      <wj-flex-grid-column header="amount" binding="amount"></wj-flex-grid-column>
    </wj-flex-grid>
  </wj-popup>       
</div>

JavaScript

// sample data
var state = [
	{ name: 'Washington', code: 'WA' },
  { name: 'California', code: 'CA' },
  { name: 'Oregon', code: 'OR' }
];
var properties = [
	{ code: 'WA', isSelected: false, isState: false, city: 'Seattle', pop: 652 },
  { code: 'OR', isSelected: false, isState: false, city: 'Portland', pop: 609 },
  { code: 'CA', isSelected: false, isState: false, city: 'Los Angeles', pop: 3884 }
];
var countries = 'US,Germany,U K,Japan,Italy,Greece'.split(','),
		data = [];
for (var i = 0; i < 5; 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
	});
}

// controller
var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope) {
	$scope.data = new wijmo.collections.CollectionView(properties);
  $scope.dataDropDown = new wijmo.collections.CollectionView(data);
  $scope.country = countries;
  $scope.stateMap = new wijmo.grid.DataMap(state, "code", "name");
            
  $scope.itemsSourceChanged = function(s, e) {
  	setTimeout(function() {
    	s.autoSizeRow(0, true);
		}, 200);
	}
});