This is a migrated thread and some comments may be shown as answers.

Load tree data with dynamic JSON string

4 Answers 1124 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Leo
Top achievements
Rank 1
Leo asked on 23 Dec 2011, 11:52 PM
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?

4 Answers, 1 is accepted

Sort by
0
Darrel
Top achievements
Rank 1
answered on 28 Apr 2012, 03:15 PM
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?
0
Thomas Tregenna
Top achievements
Rank 1
answered on 02 May 2012, 04:50 PM

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.

0
Chandra
Top achievements
Rank 1
answered on 14 May 2012, 06:45 PM
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.
0
Hari
Top achievements
Rank 1
answered on 10 Dec 2012, 05:09 PM
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?
Tags
Data Source
Asked by
Leo
Top achievements
Rank 1
Answers by
Darrel
Top achievements
Rank 1
Thomas Tregenna
Top achievements
Rank 1
Chandra
Top achievements
Rank 1
Hari
Top achievements
Rank 1
Share this question
or