[Solved] Binding TreeView to a JSON-Result

[Mathias]

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

[Mathias]

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!

[muralidhar]

Do we have any function like "bindTo" in kendo UI, In latest version i could not find it.

[Hari]

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?

[Josh]

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>