Bento Tree

by ThomsonKrish

HTML

<div ng-controller="DbConnectionCtrl">
  
  <div style="width: 300px; display: inline-block; margin-right: 10px">
    <div
        bento-tree
        tree-id="abc"
        tree-model="tree"
        tree-label="name"
        node-children="items"
        tree-collapsed="true"
        tree-icon="iconName"
        collapsing-callback="itemCollapsed"
        expanding-callback="itemExpanded"
        expand-only-model="expandOnly"
        select-model="selected"
        selectable-model="selectable"
        select-callback="selectedItemChanged"
        use-checkbox="true"
        checkbox-model="checked"
        second-tree-icon="mySecondaryIcon"
        select-as-check="false"
        on-checkbox-change="checkboxClicked"
        multi-select="true">
    </div>
    </div>
  
      <div style="width: 500px;border-width:2px;margin-top:50px; float:right">
      <div ng-repeat="item in dbConnections">
        <p1>Test Value</p1>
          <div class="panel-body">
         <span class="pull-left">
		            <span style="padding: 5px;"></span>
              <select name="mySelect" ng-model="selectedValue" ng-options="filteritem.ID as filteritem.Title for filteritem in filteritems" ng-change="selectOption(selectedValue,item)" style="width: 330px;float: right;margin-right: 50px;height: 30px;">

        			</select>
              </span>
              </div>
        </div>
      </div>
  
</div>

CSS

/* Your CSS override starts here */



















/* Your CSS override ends here */
</style>
<!-- Official hack to jsFiddle not loading External Resources properly -->
<link rel="stylesheet" href="http://bento.ui.int.thomsonreuters.com/styles/vendor.css" />
<link rel="stylesheet" href="http://bento.ui.int.thomsonreuters.com/styles/BentoUIApp.css" />
<script src="http://bento.ui.int.thomsonreuters.com/js/vendor.js"></script>
<script src="http://bento.ui.int.thomsonreuters.com/js/scripts.js"></script>
<script src="//bento.ui.int.thomsonreuters.com/pages/components/bento_flexgrid/scripts/wijmo/controls/wijmo.min.js"></script>
<script src="//bento.ui.int.thomsonreuters.com/pages/components/bento_flexgrid/scripts/wijmo/controls/wijmo.grid.min.js"></script>
<script src="//bento.ui.int.thomsonreuters.com/pages/components/bento_flexgrid/scripts/wijmo/controls/wijmo.grid.filter.min.js"></script>
<script src="//bento.ui.int.thomsonreuters.com/pages/components/bento_flexgrid/scripts/wijmo/controls/wijmo.grid.grouppanel.min.js"></script>
<script src="//bento.ui.int.thomsonreuters.com/pages/components/bento_flexgrid/scripts/wijmo/controls/wijmo.input.min.js"></script>
<script src="//bento.ui.int.thomsonreuters.com/pages/components/bento_flexgrid/scripts/wijmo/interop/angular/wijmo.angular.min.js"></script>
<style>

JavaScript

var app = angular.module('BentoUIApp', ['bento.modern', 'wj', 'bento.d3', 'aa.formExtensions', 'aa.notify']);

angular.module('BentoUIApp').controller('DbConnectionCtrl', [
  '$scope',
  '$timeout',
  function ($scope, $timeout) {
    'use strict';

		$scope.dbConnections = [];
		
    
    $scope.filteritems = [
      {ID: '1', Title: 'devwatch_w_b'},
      {ID: '2', Title: 'None'}
      
    ];
    $scope.selectOption = function(selectedVal,item) {
      $scope.dbConnections = [];
        	
       console.log("selectedVal",selectedVal); 
       console.log(item); 
       
			if(selectedVal == 1){
				$scope.tree.forEach(function(parent) {
					var i;
          
					for(i = 0; i < parent.items.length; i++) {
						if(item.name == parent.items[i].name){
							var idx = $scope.dbConnections.indexOf(parent.items[i]);
								if(idx==-1){
									parent.items[i].selected=true;
									//$scope.dbConnections.push(parent.items[i]);
									//parent.items[i].selected=false;
								}
						}
					}
				});
			}
			
		}	
    
    // Initialize callback status model
    $scope.treeCallBackStatus = 'N/A';

    /*** Callback functions ***/
    $scope.selectedItemChanged = function (item) {
      /* To cancel user selection */
      //return false;
      
			var idx = $scope.dbConnections.indexOf(item);
     
      
       $scope.treeCallBackStatus = 'Selected Item changed: "' + item.name + '"';
        	if(idx==-1 && !item.isselected){
        		$scope.dbConnections.push(item);
             //console.log($scope.dbConnections);
        	}
        	else{
        		$scope.itemCollapsed(item);
        		}
      
    };

    $scope.itemExpanded = function (item) {
      $scope.treeCallBackStatus = 'Item Expanded: "' + item.name + '"';
    };

    $scope.itemCollapsed = function (item) {
      $scope.treeCallBackStatus = 'Item Collapsed: "' + item.name + '"';
       var idx = $scope.dbConnections.indexOf(item);
       $scope.dbConnections.splice(idx, 1);
    };

   ...