Load tree data with dynamic JSON string

5 posts, 0 answers
  1. Leo
    Leo avatar
    12 posts
    Member since:
    Nov 2011

    Posted 23 Dec 2011 Link to this post

    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?

  2. Darrel
    Darrel avatar
    2 posts
    Member since:
    Oct 2008

    Posted 28 Apr 2012 Link to this post

    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?
  3. Thomas Tregenna
    Thomas Tregenna avatar
    1 posts
    Member since:
    Aug 2009

    Posted 02 May 2012 Link to this post

    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.

  4. Chandra
    Chandra avatar
    1 posts
    Member since:
    May 2012

    Posted 14 May 2012 Link to this post

    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.
  5. Hari
    Hari avatar
    10 posts
    Member since:
    Oct 2012

    Posted 10 Dec 2012 Link to this post

    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?
Back to Top