Binding TreeView to a JSON-Result

5 posts, 0 answers
  1. Mathias
    Mathias avatar
    34 posts
    Member since:
    Apr 2012

    Posted 26 Jul 2012 Link to this post

    Hello,

    we are changing our application from Telerik Controls to Kendo UI. But changing the TreeView is a little bit difficult. I hope you can help me:

    With Telerik we used the OnDataBinding- Event, called a controller-class and bound a json-result to our tree: tree.bindTo(jsonObject)
    Well this isn't possible with KendoUI.

    So I tried the DataSource-thing on our tree:

    @(Html.Kendo().TreeView()
    .Name("TreeView")
    .DataTextField("Text")
    .DataImageUrlField("ImageUrl")
    .DataUrlField("Url")
    .DataSource(dataSource => dataSource
    .Read(read => read
    .Action("GetTreeData", "Home")
    )
    )
    .ExpandAll(true)

    Without all these DataTextField, DataImage.. stuff nothing worked so after hours I found out that I need them (there has to be a better documentation... please). But: How can I add ChildElements? With hasChildren (as a Property on the Json-Object) Ithe TreeView knows that there are children but I also wanna show them after binding (.ExpandAll(true).... <-- wanna use it!)

    I really hope you can help me. I want to bind the complete tree-structure at once. No Load on demand. Is there any solution for doing that?

    And if I have my complete tree... how am I able to rebind it? We need to refresh the tree very often, so I hope you can show me a possibility to do that.

    Thank you very much!
    Mathias

  2. Mathias
    Mathias avatar
    34 posts
    Member since:
    Apr 2012

    Posted 06 Aug 2012 Link to this post

    So as I can see there is no solution fot this problem :/ Hopefully in the next release it will be possible to bind the complete tree at once and not just the first level. Using the Telerik Extensions it was possible. And we really need it!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. muralidhar
    muralidhar avatar
    12 posts
    Member since:
    Jan 2011

    Posted 25 Sep 2012 Link to this post

    Do we have any function like "bindTo" in kendo UI, In latest version i could not find it.
  5. Hari
    Hari avatar
    10 posts
    Member since:
    Oct 2012

    Posted 10 Dec 2012 Link to this post

    Hi,

    We are trying to do the same thing. Is it really not possible to load the complete Tree structure atonce? Here is what I am trying to do.

    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?
  6. Josh
    Josh avatar
    2 posts
    Member since:
    Jan 2011

    Posted 13 Dec 2012 Link to this post

    Have you tried using the "RequestEnd" event of the .Read and then call a function to expand the items?

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


    <script>
    function Expand() {
        var treeview = $("#Treeview").data("kendoTreeView");
        treeview.expand(".k-item");
    }

    </script>

Back to Top
UI for ASP.NET MVC is VS 2017 Ready