How to render a treeview using Angular and Kendo UI

Question

I am having great difficulty trying to render a treeview with angular and kendo. Here is the code I have so far:

Website1.controller("FieldsController1", function ($scope) {
     $scope.things = {
                data: [
                    {
                        text: "Furniture", items: [
                          { text: "Tables & Chairs" },
                          { text: "Sofas" },
                          { text: "Occasional Furniture" }
                        ]
                    },
                    {
                        text: "Decor", items: [
                          { text: "Bed Linen" },
                          { text: "Curtains & Blinds" },
                          { text: "Carpets" }
                        ]
                    }
                ]
            };

Above is the controller. And here is the markup.

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

Also, is there any documentation on how to do this?

Answer 1

I got it working via k-options.

http://jsfiddle.net/M84qj/1/

The only documentation I could find was this page, which, judging from your use of "things", you found as well :p

http://kendo-labs.github.io/angular-kendo/#/

Good luck with Kendo + Angular :)

Answer 2

While this post is a bit old it's one of the first ones that come up on a Google search. When creating a treeview make sure you create a HierarchicalDataSource. This allows you to define child nodes and other properties such as whether or not the item should have child nodes. This helps a ton when using a remote data source.