Angularjs + kendo-ui treeview

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

Вопрос

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.

Это было полезно?

Решение

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

Другие советы

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 }
         ]
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top