Load and Expand all parent nodes when child node id is given with ondemand loading in treeview

14 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 05 Aug 2014 Link to this post

    Hello,

    I have a treeview which has multiple levels and so we load only root nodes when treeview is displayed and everytime a node is expanded we query database and load its children. When the treeview is loaded sometimes i have a child node id and when treeview laods if a node id is passed then we should select the node by default and expand all its parent nodes. So my problem is when mytreeview loads i have only root nodes loaded adn no children and so if i look for id i do not find the node to expand. So my question is how do we load on demand when a child node id is provided which could be from nth level from any parent node whcih are not yet loaded.

    thanks

    Anamika
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 07 Aug 2014 Link to this post

    Hi Anamika,

    The TreeView hierarchical dataSource does not have information about the relationship between root nodes and not-loaded child nodes. As a result, a standalone child node ID cannot be of any use. You will have to find out all ancestor nodes' IDs and then use them to expand the TreeView to the desired child node:

    http://docs.telerik.com/kendo-ui/api/web/treeview#methods-expandPath

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 11 Aug 2014 in reply to Dimo Link to this post

    Hello,

    I have loaded the root nodes. And when a a search criteria is given i find child node id and all parent node ids till root node. But till now the datasource_read method has only loaded root nodes. In jQuery i call
    treeview.expandPath(['node1','node2']);
    Till now only node1 is loaded so i do not see treeview doing a query back to Controller to load node2 and expand node1.

    Will expandPath load childnode before expanding

    Anamika

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Aug 2014 Link to this post

    Hello Anamika,

    Yes, each node is loaded and then it is expanded. You can see it in action here:

    http://demos.telerik.com/kendo-ui/treeview/remote-data-binding

    When the page loads, do not expand the TreeView manually. Instead, execute the following script in the browser's Javascript console:

    $("#treeview").data("kendoTreeView").expandPath([2, 5]);

    You will see how the root node's children are loaded, then the root node is expanded, then the children of a child node are loaded, and the child node is expanded to show the grandchildren.

    ID 2 is the ID of the Andrew Fuller item, while 5 is the ID of the Steven Buchanan item.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 13 Aug 2014 in reply to Dimo Link to this post

    Hello
    As suggested by you i am changing remote_data_binding.cshtml in Kendo.Mvc.examples  Project and added a document ready function with the code you suggesed and now it Looks like this
    @(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="demo-section" })
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
    .Read(read => read
    .Action("Employees", "TreeView")
    )
    )
    )
    <script>
    $(document).ready(function () {

    treeview = $("#treeview").data("kendoTreeView");
    treeview.expandPath([2, 5]);
    });
    </script>

    But when i put breakopoint  in controller method
    public JsonResult Employees(int? id)
    {
    it hits just once with id null and loads Andrew Fuller and does not load its child or expand it even. Do i need to add somethingelse?

    Anamika
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Aug 2014 Link to this post

    Hello Anamika,

    The discussed demo and expandPath work as expected on my side. Please check the video below and compare with the code on your side. I have used the same demo, which is shipped together with the UI for ASP.NET MVC distribution with no modifications.

    http://screencast.com/t/jhcZ1nuXO

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 18 Aug 2014 in reply to Dimo Link to this post

    Hello Dimo,

    Thanks. Problem on my side was i was calling expandPath in documentLoad and by then no root was loaded. if i call later once root node loaded expandPath works fine.

    Another question in my Project the node id is string set to rowguid value. My Controller method sends the path to JQuery Ajax call and gets path and calls expandpath
    treeView.expandPath(['root','43e5c36d-8803-4208-911a-a3950019b709','42d51977-f7bb-40a6-828c-268aeb926acc','cb8df4d6-47a5-45b2-88c0-495c496fb75b']);
    Above  hardcoded path works but if my Controller method sends back comma separated string and i call expandpath using that it will not work. so how shall i return the comma separated string path from Controller method

    Anamika
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Aug 2014 Link to this post

    Hello Anamika,

    The described issue does not seem related to Kendo UI, but to the existing custom implementation. Please debug and compare the arguments, which you are passing to the expandPath method in the two cases, in order to find out why it doesn't work in one of them.

    For example, are you splitting the comma-separated response to several different strings, one for each GUID? Are you then passing them to the expandPath method as members of an array?

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Daniel
    Daniel  avatar
    2 posts
    Member since:
    Aug 2012

    Posted 08 Dec 2014 Link to this post

    I ran into a similar problem and managed to fix it by implementing two Controller methods
    • Controller.LoadNodes(int? parentId)
    • Controller.SearchNodes(string searchTerm)

     

    LoadNodes would return a flat list of direct children. Whereas SearchNodes would return a nested list of matched search terms and their parents.

    My example used a SQL Server backup and followed the Hierachyid Data Type tutorial.

    Once you've got that setup in the search button click event swap out the datasource for your treeview. Notice you have to set the datasource using the setDataSource method based on this post in the titled "Error when attempting to change datasource on treeview".

    function ExpandNodes(nodes) {
      return $.map(nodes, function (x) {
        x.expanded = x.children.length > 0;
        if (x.expanded)
          ExpandNodes(x.children);
        return x;
      });
    };
     
    $("#search-btn").click(function(){
      var searchText = $("#SearchText").val();
      var treeview = $("#TreeView").data("kendoTreeView");
      if(searchText.trim() != "")
      {
        url = "Controller/SearchNodes?searchText=" + searchText;
        data.setDataSource(new kendo.data.HierarchicalDataSource({
          transport: {
            read: {
              url: url,
              dataType: "json",
              type: "POST",
              contentType: "application/json; charset=utf-8"                       
            },
            parameterMap: function (options) {
              return JSON.stringify(options);
            }
          },
     
          schema: {
            parse: function (response) {
              return ExpandNode(response);
            },
            model: {
              id: "node_id",
              children: "children",   
              expanded: true
            }
          }
        }));
      }
      else
      {
        url = "Controller/LoadNodes";
        data.setDataSource(new kendo.data.HierarchicalDataSource({
          transport: {
            read: {
              url: url,
              dataType: "json",
              type: "POST",
              contentType: "application/json; charset=utf-8"                       
            },
            parameterMap: function (options) {
              return JSON.stringify(options);
            }
          },
     
          model: {
            id: "node_id",
          }
        }
                                                                 }));    
      }
      data.dataSource.read();
    });
  11. VasVas
    VasVas avatar
    31 posts
    Member since:
    Nov 2012

    Posted 21 May 2015 in reply to Daniel Link to this post

    Hi 

    I'm trying to use expand all to my treeView. as result it openes just the first two nodes.

    My treeview is flat, and has parent node null. 

    Why does it happen?

    do you have an example that works with parent node null, to send me?

     

    Thanks, 

    have a good day!

  12. VasVas
    VasVas avatar
    31 posts
    Member since:
    Nov 2012

    Posted 21 May 2015 in reply to VasVas Link to this post

    as to the question above, I have a different sample that doesn't open at all the treeview.

    thanks,

    (most from : http://docs.telerik.com/kendo-ui/web/treeview/binding-to-flat-data)

     <div id="tree"></div>

     

    <script>

    var flatData = [
      { id: 1, parent: null, text: "Item 1" },
      { id: 2, parent: null, text: "Item 2" },
      { id: 3, parent: null, text: "Item 3" },
      { id: 4, parent: null, text: "Item 4" },
      { id: 5, parent: 1, text: "Item 1.1" },
      { id: 6, parent: 1, text: "Item 1.2" },
      { id: 7, parent: 1, text: "Item 1.3" },
      { id: 8, parent: 3, text: "Item 3.1" },
      { id: 9, parent: 3, text: "Item 3.2" },
      { id: 10, parent: 5, text: "Item 1.1.1" },
      { id: 11, parent: 5, text: "Item 1.1.2" },
      { id: 12, parent: 5, text: "Item 1.1.3" },

    { id: 13, parent: 10, text: "Item 1.1.3" },

    { id: 14, parent:10, text: "Item 1.1.3" },

    { id: 15, parent:10, text: "Item 1.1.3" }
    ];

    // tree for visualizing data
    $("#tree").kendoTreeView({
      dataSource: {
        transport: {
          read: function(options) {
            var id = options.data.id || null;

            options.success($.grep(flatData, function(x) {
              return x.parent == id;
            }));
          }
        },
        schema: {
          model: {
            id: "id",
            hasChildren: function(x) {
              var id = x.id;

              for (var i = 0; i < flatData.length; i++) {
                if (flatData[i].parent == id) {
                  return true;
                }
              }
              return false;
            }
          }
        }
      }
    });
    var treeview = $("#tree").data("kendoTreeView");
    treeview.expand(".k-item");
    </script>

  13. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 25 May 2015 Link to this post

    Hello,

    Only the root nodes will be expanded with the code that you provided because the only they will be loaded at the time the expand method is being called. You could load all nodes initially using the loadOnDemand option in order to expand all nodes(live-demo) with the provided code.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. VasVas
    VasVas avatar
    31 posts
    Member since:
    Nov 2012

    Posted 16 Jul 2015 in reply to Daniel Link to this post

    Thanks for your answer.

    when I write treeview.expand(".k-item") - is supposed to open all levels, but does not(opens one or two levels only).

    (every time I write again treeview.expand(".k-item") - opens another level, but then other things don't work).

    now when i added loadOnDemand - it opened another level. 

    but it didn't open all levels.

    we have kendo.mvc.dll of version - 2015.1.318.440.

    Thanks in advance!

     

  15. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Jul 2015 Link to this post

    Hello again,

    How are you binding the data? If the data is bound via Ajax then the approach will not work because the data will loaded asynchronously. In this case you could either add a field named expanded to the returned items with the value set to true or use the dataBound event e.g.
    function onDataBound(e) {
        var root = e.node ? $(e.node) : this.element;
        this.expand(root.find(".k-item"));
    }

    If you are not binding the data via Ajax then please provide the code that you are using so I can check the setup.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready