Wijmo 5 - ComboBox binding

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.90/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.90/styles/wijmo.min.css">
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>ComboBox Binding</h1>

    <h3>Select a Product</h3>
		<button class="btn btn-primary" id="theButton">
      Popup with owner element
    </button>
		<wj-popup owner="#theButton">
        <wj-combo-box items-source="products" display-member-path="name" initialized="initCombo(s,e)"></wj-combo-box>
    </wj-popup>
    
</div>

CSS

.wj-popup {
  padding: 20px;
  border: 2px solid blue;
  min-width: 300px;
	min-height: 200px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    var products = [
        { name: 'Widget', price: 123, category: 1 },
        { name: 'Gadget', price: 456, category: 2 },
        { name: 'Sprocket', price: 32, category: -1 }, // no category
        { name: 'Gizmo', price: 56, category: 2 },
        { name: 'Doohickey', price: 31, category: 1 }
	];
    var categories = [
        { id: 1, name: 'add-ins' },
        { id: 2, name: 'parts' }
    ];
    
    $scope.products = new wijmo.collections.CollectionView(products);
    $scope.categories = categories;
    $scope.initCombo = function(s, e) {
				console.log(document.getElementsByClassName('wj-popup')[0].parentNode.clientHeight);
				console.log(document.getElementsByClassName('wj-popup')[0].parentNode.clientWidth);
				console.log(s);
				s.maxDropDownWidth = document.getElementsByClassName('wj-popup')[0].parentNode.clientWidth;
				s.maxDropDownHeight = document.getElementsByClassName('wj-popup')[0].parentNode.clientHeight;
				s.refresh();
		}
});