Wijmo 5 - ComboBox, AutoComplete, ListBox

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    
<h3><b>Cascading ComboBox</b></h3>
  <div>Parent ComboBox</div>
  <wj-combo-box items-source="parentControl" display-member-path="value" selected-index="index" placeholder="Parent" selected-index-changed="selectedIndexChanged(s,e)"></wj-combo-box>
  <div>Child ComboBox</div>
  <wj-combo-box items-source="childControl" display-member-path="value" placeholder="Child" is-required="false" selected-index-changed="selectedIndexChangedChild(s,e)"></wj-combo-box>
  <div>Grandchild ComboBox</div>
  <wj-combo-box items-source="grandchildControl" display-member-path="value" placeholder="Grandchild" is-required="false"></wj-combo-box>
</div>

JavaScript

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

// controller
app.controller('appCtrl', function ($scope, $http) {
	var apiData = [];
  var parentCount = 0;
  var childCount = 0;
  var checkVal = 2;
  $scope.index = 0;
  
  // Parent CollectionView, sets index when data is loaded via API
  $scope.parentControl = new wijmo.collections.CollectionView([], {
  	sourceCollectionChanged: function(s, e) {
    	$scope.index = 2;
    }
  });
  
  // Child and Grandchild CollectionViews
  $scope.childControl = new wijmo.collections.CollectionView([]);
  $scope.grandchildControl = new wijmo.collections.CollectionView([]);
  
  // API call for parent data
  $http.get("https://mocki.io/v1/720d58ad-9520-40e5-9e33-cfa0c6164d7d").then(function(response) {
  	$scope.parentControl.sourceCollection = response.data;
  });
  
  // Loads data for child ComboBox when parent index changes
  $scope.selectedIndexChanged = function(s,e) {
  	parentCount += 1;
  	if(parentCount > 3) {
    	childCount = 0;
    	$http.get("https://mocki.io/v1/42e787d1-13a4-4762-bb59-76a2c78061cd").then(function(response){
      	// Assigns retrieved data and sets the current selection to null
        
        $scope.childControl.sourceCollection = response.data;
        $scope.childControl.currentItem = null;
        
        // Clear out the grandchild ComboBox
        $scope.grandchildControl.sourceCollection = [];
      });
    }
  }
  
  // Loads data for grandchild ComboBox when child index changes
  $scope.selectedIndexChangedChild = function(s,e) {
  	childCount += 1;
  	if(childCount > checkVal) {
    	$http.get("https://mocki.io/v1/4fa153c6-0a13-4d95-a8a1-cc922c8e5fd5").then(function(response) {
      	// Assigns retrieved data and sets the current selection to null
        $scope.grandchildControl.sourceCollection = response.data;
        $scope.grandchildControl.currentItem = null;
        // Resets the childCount so that grandchild doesn't get populated if you...