Treeview ajax without load on demand

2 posts, 0 answers
  1. Colin M
    Colin M avatar
    1 posts
    Member since:
    Jul 2012

    Posted 10 May 2013 Link to this post

    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
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top