vatModule.controller('devTreeController', ['$log', '$scope','$translate', function ($log, $scope, $translate) { 'use strict'; var data = [ { "ID": 1, "name": "Stores", "expanded": true, "selected":true }, { "ID": "1_1", "categoryId": 1, "name": "Super Mart of the West", "expanded": true, "selected": true }, { "ID": "1_1_1", "categoryId": "1_1", "name": "Video Players", "selected": true }, { "ID": "1_1_1_1", "categoryId": "1_1_1", "name": "HD Video Player", "price": 220, "selected": true }, { "ID": "1_1_1_2", "categoryId": "1_1_1", "name": "SuperHD Video Player", "price": 270, "selected": true }, { "ID": "1_1_2", "categoryId": "1_1", "name": "Televisions", "expanded": true, "selected": true }, { "ID": "1_1_2_1", "categoryId": "1_1_2", "name": "SuperLCD 42", "price": 1200, "selected": true }, { "ID": "1_1_2_2", "categoryId": "1_1_2", "name": "SuperLED 42", "price": 1450, "selected": true }, { "ID": "1_1_2_3", "categoryId": "1_1_2", "name": "SuperLED 50", "price": 1600, "selected": true }, { "ID": "1_1_2_4", "categoryId": "1_1_2", "name": "SuperLCD 55", "price": 1750, "selected": true }, { "ID": "1_1_2_5", "categoryId": "1_1_2", "name": "SuperLCD 70", "price": 4000, "selected": true }, { "ID": "1_1_3", "categoryId": "1_1", "name": "Monitors", "selected": true }, { "ID": "1_1_3_1", "categoryId": "1_1_3", "name": "19\"", "selected": true }, { "ID": "1_1_3_1_1", "categoryId": "1_1_3_1", "name": "DesktopLCD 19", "price": 160, "selected": true }, { "ID": "1_1_4", "categoryId": "1_1", "name": "Projectors", "selected": true }, { "ID": "1_1_4_1", "categoryId": "1_1_4", "name": "Projector Plus", "price": 550, "selected": true }, { "ID": "1_1_4_2", "categoryId": "1_1_4", "name": "Projector PlusHD", "price": 750, "selected": true } ]; var data1 = [ { "ID": 1, "name": "Stores", "expanded": true }, { "ID": "1_1", "categoryId": 1, "name": "Super Mart of the West", "expanded": true }, { "ID": "1_1_1", "categoryId": "1_1", "name": "Video Players" }, { "ID": "1_1_1_1", "categoryId": "1_1_1", "name": "HD Video Player", "price": 220 }, { "ID": "1_1_1_2", "categoryId": "1_1_1", "name": "SuperHD Video Player", "price": 270 }, { "ID": "1_1_2", "categoryId": "1_1", "name": "Televisions", "expanded": true }, { "ID": "1_1_2_1", "categoryId": "1_1_2", "name": "SuperLCD 42", "price": 1200 }, { "ID": "1_1_2_2", "categoryId": "1_1_2", "name": "SuperLED 42", "price": 1450 }, { "ID": "1_1_2_3", "categoryId": "1_1_2", "name": "SuperLED 50", "price": 1600 }, { "ID": "1_1_2_4", "categoryId": "1_1_2", "name": "SuperLCD 55", "price": 1750 }, { "ID": "1_1_2_5", "categoryId": "1_1_2", "name": "SuperLCD 70", "price": 4000 }, { "ID": "1_1_3", "categoryId": "1_1", "name": "Monitors" }, { "ID": "1_1_3_1", "categoryId": "1_1_3", "name": "19\"" }, { "ID": "1_1_3_1_1", "categoryId": "1_1_3_1", "name": "DesktopLCD 19", "price": 160 }, { "ID": "1_1_4", "categoryId": "1_1", "name": "Projectors" }, { "ID": "1_1_4_1", "categoryId": "1_1_4", "name": "Projector Plus", "price": 550 }, { "ID": "1_1_4_2", "categoryId": "1_1_4", "name": "Projector PlusHD", "price": 750 } ]; (function () { var treeView; var syncTreeViewSelection = function (treeView) { if (!treeView) return; if (!$scope.treeBoxValue) { treeView.unselectAll(); return; } $scope.treeBoxValue.forEach(function (key) { treeView.selectItem(key); }); }; $scope.treeBoxValue = _.pluck(data1, 'ID'); $scope.treeBoxOptions = { bindingOptions: { value: 'treeBoxValue' }, valueExpr: "ID", displayExpr: "name", placeholder: "Select a value...", showClearButton: true, dataSource: data1, onValueChanged: function () { syncTreeViewSelection(treeView); }, treeView: { dataSource: data1, dataStructure: "plain", keyExpr: "ID", parentIdExpr: "categoryId", displayExpr: "name", selectByClick: true, selectNodesRecursive: true, showCheckBoxesMode: "selectAll", selectionMode:true, //bindingOptions: { // selectionMode: "selectionMode" //}, onContentReady: function (e) { treeView = e.component; //console.log('onContentReady'); //console.log(treeView); //var value = treeView.getSelectedNodesKeys(); //$scope.treeBoxValue = value; syncTreeViewSelection(treeView); }, onItemSelectionChanged: function (args) { var value = args.component.getSelectedNodesKeys(); $scope.treeBoxValue = value; } } }; })(); }]);