angular-kendo treeview with k-template
trying to reproduce issue where the tree node text goes blank or says {{dataItem.text}} .
by bob m
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<div ng-app="app" ng-controller="myCtrl as vm">
<span id="treeview-left" kendo-tree-view="tree" class="sourceTree"
k-data-source="treeData"
k-on-change="" >
</span>
</div>
JavaScript
var app = angular.module('app', ['kendo.directives']);
app.controller("myCtrl", function ($compile, $scope) {
var vm = this;
// test using treeData from kendo ui demo site
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});
var userKriData = [
{ id: 1, kri_group: "CDSStress A", kri: "CDS Stress A", kri_alias: "test", aggreg_formula: "SUM()" },
{ id: 2, kri_group: "CDSStress B", kri: "CDS Stress B", kri_alias: "test", aggreg_formula: "SUM()" },
{ id: 3, kri_group: "CDSStress C", kri: "CDS Stress C", kri_alias: "test", aggreg_formula: "SUM()" },
{ id: 4, kri_group: "CDSStress D", kri: "CDS Stress D", kri_alias: "test", aggreg_formula: "SUM()" }
];
var kriData = getKriSampleData(); // FETCH SAMPLE DATA IN FUNCTION BELOW !!
// TREE AND GRID SETTINGS
vm.treeOptions = {
checkboxes: { checkChildren: true },
template: "#: item.group || item.kri#", // checks for both fields, as per Telerik support
dataTextField: ["group", "kri"],
dragAndDrop: true
}
// TREEVIEW DATASOURCE
vm.kriServerDataSource = new kendo.data.HierarchicalDataSource({
transport: {
//read: getKriSampleData
read: function(options){
options.success(kriData)
}
},
schema: {
model: { children: "kris" }
},
loadOnDemand: false,
requestEnd: function (e) {
console.log("Read requested ended: ");
}
});
function getKriSampleData() {
var myKri =
[
{
"group": "99_HSVaR",
"kris": [
...