Auto Complete Free Typing
Free typing in Auto Complete when used inside Flex grid
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20161.138/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.input.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="appCtrl">
<wj-flex-grid items-source="data">
<wj-flex-grid-column binding="country" header="Country" width="*" >
<wj-flex-grid-cell-template cell-type="CellEdit">
<wj-auto-complete items-source="autoComplete"
text="$value"
display-member-path="country"
class="cell"></wj-auto-complete>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="Downloads" binding="downloads">
<wj-flex-grid-cell-template cell-type="CellEdit">
<wj-input-number value="$value" style="background:yellow;"> </wj-input-number>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
</wj-flex-grid>
</div>
</div>
CSS
.cell{
width:100%;
height:100%;
border-radius:0;
}
JavaScript
var app = angular.module('myApp', ['wj']);
app.controller('appCtrl', function ($scope) {
// Data Creation
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < 10; i++) {
data.push({
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
date: new Date(2014, i % 12, i % 28),
sales: Math.random() * 10000
});
}
$scope.data = new wijmo.collections.CollectionView(data);
$scope.autoComplete = new wijmo.collections.CollectionView(data);
});