Load tree data with dynamic JSON string

[Leo]

I’m trying to load a tree from a JSON string which is being returned from a Java action instead of having it statically inside the HTML.


The original code was like so:

<script>

    $("#treeview-left, #treeview-right").kendoTreeView({

        dragAndDrop: true,

            dataSource: [

                { text: "Item 1", expanded: true, items: [

                    { text: "Item 1.1" },

                    { text: "Item 1.2" },

                    { text: "Item 1.3" }

                ] },

                { text: "Item 2", items: [

                    { text: "Item 2.1" },

                    { text: "Item 2.2" },

                    { text: "Item 2.3" }

                ] },

                { text: "Item 3" }

                        ]

    }).data("kendoTreeView");

</script>

I modified it like so:

<script>

    $("#treeview-left, #treeview-right").kendoTreeView({

        dragAndDrop: true,

            dataSource: {

                transport: {

                    read: {

                        url: "/site/GetTreeData.action",

                        dataType: "json"

                    }

                }

            }

    }).data("kendoTreeView");

</script>

The GetTreeData.action returns the following JSON string:

[
{ text: "Item 1", expanded: true, items: [

    { text: "<a href='http://localhost:8080/site/GetEmployee.action'>clear here</a>", encoded: false },

    { text: "Item 1.2" },

    { text: "Item 1.3" }

] },

{ text: "Item 2", items: [

    { text: "Item 2.1", items: [

        { text: "Item 2.1.1" },

        { text: "Item 2.1.2" }

    ] },

    { text: "Item 2.2" },

    { text: "Item 2.3" }

] },

{ text: "Item 3" }

]

If I paste the previous JSON string inside the page and reload it, the tree displays just fine.

So, what am I doing wrong?

[Darrel]

Based on the online documentation, this is not supported.

See: http://www.kendoui.com/documentation/ui-widgets/treeview/overview.aspx

"A TreeView can be created by leveraging HTML lists. However, it does not support binding to a remote data source at this point in time."

I am working on a my own implementation. If you are interested, I could post it when I am done?

[Thomas Tregenna]

My workaround for this was to populate the tree from the return function of a standard jQuery data call...

$.getJSON("../../api/data/", null, function (d, s, j) {

    $("#treeView").kendoTreeView({

        dataSource: d

    });

});

I hope this helps.

[Chandra]

Can you please provide the workaround for loading tree with json with an example. I am stuck up and could not do this.And kindly let me know quickly as its really urgent.

[Hari]

we are struck as well!! Can you help us?

I am trying to convert my sample XML file as JSON object and set that as a datasource to my tree view control. Its not working. I am sure that I am missing something here but not sure what's that. Please help me.

Here is my code in Controller class where I am loading the XML file and retruning as JSON

        public JsonResult Employees()
        {

            XElement xdoc = XElement.Load("C:\\Users\\a409114\\Desktop\\TreeView.xml");
            return Json(xdoc, JsonRequestBehavior.AllowGet);
        }

Here is my code in the view file where I am invoking the action name "Employees" in my controller class "TreeViewController".

<div class="demo-section">
@(Html.Kendo().TreeView()
    .Name("treeview")
     .DataTextField("vehicles")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Employees", "TreeView")
        )
    )
)
</div>

<style scoped>
.demo-section {
    width: 200px;
}
</style>

Here is my sameple XML file:

<?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>

This is not loding the Tree View Control!

Can you please help me?