Angularjs + kendo-ui treeview

StackOverflow https://stackoverflow.com/questions/18386992

Question

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.

Était-ce utile?

La solution

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'
}

Autres conseils

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 }
         ]
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top