2

I have some route:

when('/tvtest/:userid', {templateUrl: 'template/usertv', controller: SomeTest}).

which loads some html with emebedded kendo-ui controls:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://localhost:7000/myservice/script/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:7000/myservice/script/kendo.all.min.js"></script>

   </head>
<body>

    <h1>{{"Hello"}}</h1>

        <div id="example" class="k-content">
            <div class="demo-section">
                <ul id="treeview"/>
            </div>

            <script >
             console.log("test message");
             var dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                url: "http://demos.kendoui.com/service/Employees",
                dataType: "jsonp"
            }
                        },
            schema: {
            model: {
                id: "EmployeeId",
                hasChildren: "HasEmployees"
                    }
                    }
                });

            $("#treeview").kendoTreeView({
                            dataSource: dataSource,
                            dataTextField: "FullName"
                            });
            console.log(kendo);

    dataSource.read();
            </script>

    {{user.UserName}}

        </div>
</body>
</html>

It is sample treeview and it doesn't work with routing, it print "Hello", some user name, but it doesn't show treeview, it even doesn't print "test message" on console, it is even doesn't try to load jquery and kendo scipts. Is it because contents of script tag are ignored when I load some template? I heared about angular-kendo project, but I'm curious whether it is possible to accomplish within only AngularJS and kendo-ui frameworks? It seems that I simply doing smth wrong...

UPDATE:

Ok, I understood that within angular-kendo things seems to be working... But I cannot get treeview working:

I have control, like:

function HomeCtrl($scope) {
  $scope.things = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    }   
}}

I have template file returned with following html:

   <div  kendo-tree-view   
         k-data-source="things"
     k-data-text-field="'name'" />

But it doesn't work... What I'm doing wrong???

Thanks in advance.

Graham
  • 7,431
  • 18
  • 59
  • 84
Sharov
  • 458
  • 8
  • 38

2 Answers2

7

I've never been able to get a kendo tree view working without using k-options like the following:

http://jsfiddle.net/L6vSX/

View:

<div kendo-tree-view k-options="things">

Controller:

$scope.things = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    },
    dataTextField: 'name'
}
Jesus is Lord
  • 14,971
  • 11
  • 66
  • 97
  • 1
    +1 Just came across this answer. Thanks! k-options works and k-data-source doesnt. So that works great. However, in my case I have an additional issue which is - when the user checks a checkbox, I trigger a controller method through ngChange which deletes one of the items in the datasource. However, my treeview does not seem to refresh to remove the deleted row. Might this be something you have encountered? Anyone seen any such issues with updates to the datasource not triggering the tree being refreshed? Any idea if it is supposed to work in this context? – mattr Mar 22 '14 at 07:11
  • If you get a plunkr up with it I'll take a look (and if you make it a question others probably will, too :P) – Jesus is Lord Mar 22 '14 at 20:25
  • Thanks for the suggestion. I have created a new question at http://stackoverflow.com/questions/22587975/angularjs-kendo-treeview-not-updating - with a jsfiddle. – mattr Mar 23 '14 at 07:00
-1

Here's the way I do it, and it works this way :

<div  kendo-tree-view  k-data-source="things"  />

 $scope.things = [
         { name: "Thing 1", id: 1 },
         { name: "Thing 2", id: 2 },
         { name: "Thing 3", id: 3 }
         ]
bob.mazzo
  • 5,183
  • 23
  • 80
  • 149