Kendo UI Treeview and XML Data Source

Question

I've been reading the existing documentation about the Treeview as well as the Hierarchical Data Source and the Data Source but I am kinda lost it about the possible remote data source types that I can use with the Treeview.

Apart from json, xml is also supported, right? Is it possible to bind it and view the xml file with the Treeview?

I've been trying something like:

        <script>
            var ds = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url:"http://localhost:8080/OnTheSpotRestfullAPI/testTree.xml"
                        }
                    },
                    schema: {
                        type: "xml",
                        data: "/tree/vehicles",
                        model: {
                            fields: {
                                car: "car/text()",
                                bike: "bike/text()"
                            }
                        }
                    }
                });

            $("#treeview").kendoTreeView({
                dataSource: ds
            });
        </script>

with the testTree.xml being:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>    
<tree>  
    <vehicles>
        <car>FM-1100</car>
        <car>FM-4200</car>
        <bike>FM-3100</bike>
    </vehicles>
    <personnel>
        <client>GH-3000</client>
        <vip>GH-3100</vip>
    </personnel>
</tree>

I want the resulting tree to be something like:

(Vehicles)

--(Cars)

----FM-1100

----FM-4200

--(Bikes)

----FM-3100

(Personnel)

--(Clients)

----GH-3000

--(VIPs)

----GH-3100

PS. Names in () are supposed to be something like folders containing their "children"

but I can't seem to be able to view the tree at all.. Kinda lost here, can someone please point me to the right direction?

Thanks in advance

Answer 1

Just to make sure: you should execute the script code after the html is loaded so you should enclose it in

<script>
    $(document).ready(function () {
        // The JavaScript code goes here
    });
</script>

The datasource ds should be defined HierarchicalDataSource and not DataSource. Reading you XML example I'm not sure how is the hierarchy organized (the tree), what should be the content of the tree.

You might try something like:

<script>
    $(document).ready(function () {
        var ds = new kendo.data.HierarchicalDataSource({
            transport:{
                read:{
                    url:"testTree.xml"
                }
            },
            schema   :{
                type :"xml",
                data :"/tree/vehicles/car",
                model:{
                    fields:{
                        text:"text()"
                    }
                }
            }
        });


        $("#treeview").kendoTreeView({
            dataSource   :ds
        });
    });
</script>

And the XML something like:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<tree>
    <vehicles>
        <car>FM-1100</car>
        <car>FM-4200</car>
        <bike>FM-3100</bike>
    </vehicles>
    <personnel>
        <client>GH-3000</client>
        <vip>GH-3100</vip>
    </personnel>
</tree>

NOTE: Not sure what to do with bike