In my angular web I am using Kendo UI for representing tree view. Here is my html file.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"> </script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myappCtrl">
<div ng-attr-id="{{ treeview }}" kendo-tree-view k-options="treeview"></div>
</div>
<div style="padding-top: 2em;">
<h4>Selected:</h4>
<p ng-attr-id="{{ selected }}">No interests selected.</p>
</div>
</div>
<script src="../scripts/test.js"></script>
</body>
</html>
And this is my test.js
var app = angular.module('myapp', []);
app.controller('myappCtrl', function($scope, $http, $window) {
$scope.dataModal = [ {
"key" : "Key",
"type" : "type",
"value" : 1,
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
} ];
$scope.treeview = {
checkboxes : {
checkChildren : true
},
//check : onCheck,
dataTextField : "key",
loadOnDemand : false,
dataSource : $scope.dataModal
};
// get keys of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].key);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked nodes on data source change
function onCheck() {
var checkedNodes = [];
var treeView = $("#treeview").data("kendoTreeView");
var message = "";
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "Selected Interests: " + checkedNodes.join(", ");
} else {
message = "No Interests Checked.";
}
$("#selected").html(message);
}
});
My page is displaying the tree view. And I am using two functions to get the selected items of the tree. But it gives as error on console log as below.
test.js:347 Uncaught TypeError: Cannot read property 'dataSource' of null
Line 347: checkedNodeIds(treeView.dataSource.view(), checkedNodes);
Please be kind enough to show me what's wrong with my codes.
Thank You
First of all your code needs some modifications
In order to use kendo directives inside angular you need to introduce a dependency on them, this is done on your module configuration, without this configuration anything will work
var app = angular.module('myapp', ['kendo.directives']);
You should avoid using jQuery selectors on controllers, it's place is in angualr directives. In order to set the output message to the view you can simply use a variable on your scope and then bind it on the view
// show checked nodes on data source change
function onCheck(kendoEvent) {
var checkedNodes = [];
var treeView = kendoEvent.sender;
var message = "";
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "Selected Interests: " + checkedNodes.join(", ");
} else {
message = "No Interests Checked.";
}
$scope.$apply(function() { $scope.selectedItems = message; });
}
Note that we use $scope.$apply, to set this message, this is because jQuery events which is used by kendo happens outside the control of angular, so angular does not update the view because he doesn't know that he has to do it, using $scope.$apply we force it Angular to update the bindings.
onCheck event inside tree configuration should be uncomment, all kendo events handlers receives a parameter as an argument, which contains a pointer to the widget. documentation