Best way to render a Angular-Kendo treeview using the k-template option and href links

Question

I'm trying to wire up a Kendo treeview with href links.

The treeview has an href link associated with each tree item, however I still need to modify that to ONLY render the href when it's a leaf node.

My main problem now is trying to properly render the template object to read my reptName field as follows :

  vm.treeItemTemplate = "<a href='\?reptname='{{dataItem.reptName}}'> {{dataItem.text}} </a>";

No matter what I put in ?reptname= , it simply does not work.

Even hard coding the param does not work, as in :

  vm.treeItemTemplate = "<a href='\?reptname='test'> {{dataItem.text}} </a>";

The tree item's link just renders as "://.../index.html?reptname= "

Ultimately, I'm trying to use the reptName field from my data source below. This will be the parameter I'm passing in.

and this is the Json data that is returned to the treeview's k-data-source:

    var reportsJson = [
           {
               id: 1, text: "MR Reports", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
               {
                   id: 2, text: "VaR", spriteCssClass: "folder", items: [
                       { id: 3, text: "VaR 97", reptName: "VaR 97" },
                       { id: 4, text: "VaR 98", reptName: "VaR 98" },
                       { id: 4, text: "VaR 99", reptName: "VaR 99" }
                   ]
               },
               {
                   id: 5, text: "Stressed VaR", spriteCssClass: "folder", items: [
                       { id: 6, text: "Rept1", reptName: "Rept1" },
                       { id: 7, text: "Rept2", reptName: "Rept2" },
                       { id: 8, text: "Rept3", reptName: "Rept3" }
                   ]
               }                   
               ]
           }
        ];

My sidebar.html code :

<div data-cc-sidebar data-ng-controller="sidebar as vm">
<div class="sidebar-filler"></div>
<div class="sidebar-dropdown"><a href="#">Menu</a></div>
<div class="sidebar-inner">
    <div class="sidebar-widget">
    </div>

    <ul class="navi">  <!-- pulls from vm.routes to render left nav menu -->
         <li class="nlightblue fade-selection-animation" ng-class="{dropdown: r.config.sub}" 
            data-ng-repeat="r in vm.navRoutes">
    </ul>

      <a id="addReportLink" href="" ng-click="value = 4"><b class="fa fa-plus-square"></b></a>
      <div style="float:left;">
         <!-- TREEVIEW WIDGET WITH k-template option-->
          <span id="treeview" kendo-tree-view="tree" 
            style="color:white;"
            k-template="vm.treeItemTemplate"
            k-options="vm.treeOptions"
            k-data-source="vm.reportsTree"
            k-on-change="vm.onTreeSelect(kendoEvent)">
        </span>      
      </div>         
 </div>    

and my sidebar.js controller is :

(function () { 
'use strict';

var controllerId = 'sidebar';
angular.module('app').controller(controllerId,
    ['$route', 'config', 'routes', 'datacontext', '$scope', sidebar]);

function sidebar($route, config, routes, datacontext, $scope) {
    var vm = this;

    vm.isCurrent = isCurrent;

    vm.onTreeSelect = onTreeSelect; // TreeView select event
    vm.selectedReport = '';

    vm.treeOptions = {         // SET TREEVIEW OPTIONS !!
        checkboxes: {
            checkChildren: true                
        },
        dragAndDrop: true
    };
    vm.reportsTree = [];        

    // SET KENDO TEMPLATE HERE !
    vm.treeItemTemplate = "<a href='\?reptname='{{dataItem.reptName}}'> {{dataItem.text}} </a>";
    activate();

    function activate() {
              getNavRoutes(); getReportsTree() 
    }

    function getNavRoutes() {
        vm.navRoutes = routes.filter(function(r) {
            return r.config.settings && r.config.settings.nav;
        }).sort(function(r1, r2) {
            return r1.config.settings.nav - r2.config.settings.nav;
        });
    }        
    function isCurrent(route) {
        if (!route.config.title || !$route.current || !$route.current.title) {
            return '';
        }
        var menuName = route.config.title;
        return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : '';
    }
    function getReportsTree() {
        return datacontext.getReportsTree().then(function (data) {
            return vm.reportsTree = data;
        });
    }
    function onTreeSelect(e) {
        vm.selectedReport = e.sender._current.text();
        console.log("Selected report: ", vm.selectedReport);
    }         
};
})();

Any advice or guidance would be greatly appreciated as I come up the learning curve on Angular, as well as the integration with Kendo UI.

best regards. Bob

Answer 1

k-template="vm.treeItemTemplate" is not working using an href link, and no one has provided any suggestions on this. I ended up using :

   vm.onTreeSelect = onTreeSelect;

in my controller code; and within onTreeSelect() function I redirected the url using the $location service with parameters:

   $location.url(<url with parameters>);

Then the $location.hash() method to retrieve the query string on the target page.