This is a migrated thread and some comments may be shown as answers.

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

13 Answers 1195 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 05 Aug 2014, 09:06 AM
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

13 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Aug 2014, 07:18 AM
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!
 
0
Anamika
Top achievements
Rank 1
answered on 11 Aug 2014, 02:04 PM
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

0
Dimo
Telerik team
answered on 13 Aug 2014, 09:00 AM
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!
 
0
Anamika
Top achievements
Rank 1
answered on 13 Aug 2014, 09:28 AM
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
0
Dimo
Telerik team
answered on 15 Aug 2014, 06:50 AM
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!
 
0
Anamika
Top achievements
Rank 1
answered on 18 Aug 2014, 02:04 PM
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
0
Dimo
Telerik team
answered on 20 Aug 2014, 09:38 AM
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!
 
0
Daniel
Top achievements
Rank 1
answered on 08 Dec 2014, 10:28 PM
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();
});
0
VasVas
Top achievements
Rank 1
answered on 21 May 2015, 10:30 AM

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!

0
VasVas
Top achievements
Rank 1
answered on 21 May 2015, 10:34 AM

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>

0
Daniel
Telerik team
answered on 25 May 2015, 11:40 AM
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!
 
0
VasVas
Top achievements
Rank 1
answered on 16 Jul 2015, 10:27 AM

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!

 

0
Daniel
Telerik team
answered on 20 Jul 2015, 12:52 PM
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!
 
Tags
TreeView
Asked by
Anamika
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Anamika
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
VasVas
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or