Treeview ajax without load on demand

[Colin M]

Hi
I am trying to load a treeview using an Ajax call but with the load on demand set to false, I am looking to return the hierarchy to the client in a single call.  The basic layout of the treeview is simple

@(Html.Kendo().TreeView()
                          .Name("AvailablePortfolios")
                        .DataSource(dataSource => dataSource.Read("GetSelectedClientPortfolios", "PortfolioGroup"))
                        .LoadOnDemand(false))

and the json returned from the client is

[{"id":10014853,"text":"Ali, Mr Jake","items":[{"id":35443,"text":"Individual Investment Account (IMF0BGNX  D)","hasChildren":false},{"id":35444,"text":"ISA (IMF0BGNXSHD)","hasChildren":false}],"hasChildren":true}]

When I use this setup I find that the client is making roughly 20 - 30 requests to the server with the following request

GET /Platform/Tools/PortfolioGroup/GetSelectedClientPortfolios?id=10014853 HTTP/1.1

The Treeview then displays the first level correctly but whenever I attempt to expand out the tree I get the first node repeated.

Is there something wrong with the way my json is constructed or is there some other step I have missed.  Are there any examples of an Ajax request with load on demand set to false.

Thanks

Colin

[Daniel]

Hello Colin,

Loading the entire data with a single request is not supported by the MVC TreeView. You should either bind the data on the server or use the JavaScript initialization e.g.

<div id="treeview"></div>

<script>
    dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: '@Url.Action("GetSelectedClientPortfolios","PortfolioGroup")',
                dataType: "json"
            }
        },
        schema: {
            model: {
                children: "items",
                hasChildren: "hasChildren",
                id: "id"
            }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: dataSource,
        dataTextField: "text"
    });
</script>

When the loadOnDemand option is enabled the TreeView will make a request for the children nodes immediately after a node is loaded so you should return the children based on the sent ID from the action method. Regards,
Daniel
the Telerik team