CellTemplate InputDate

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">
   <wj-flex-grid items-source="dataDropDown" allow-add-new="true">
     <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-cell-template cell-type="CellEdit">
         <wj-input-date value="$value" min="2014-8-1" format="M/d/yyyy"></wj-input-date>
       </wj-flex-grid-cell-template>
     </wj-flex-grid-column>
     <wj-flex-grid-column header="amount" binding="amount"></wj-flex-grid-column>
   </wj-flex-grid>
 </div>

JavaScript

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.dataDropDown = new wijmo.collections.CollectionView(data);
            $scope.country = countries;
            
            $scope.itemsSourceChanged = function(s, e){
            		setTimeout(function() {
                		s.autoSizeRow(0, true);
                });
            }
        });