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

Programatically select a tree node

10 Answers 3868 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 22 Sep 2012, 04:12 AM
Hi,

I have searched the web and the forums but I just don't get how to do this.

I load a tree from a datasource and each tree element has an attribute with 'data-id="xx"'. Where xx is a unique id number. The tree is drawn fine. I can select the first row in the tree with  'treeview.select(".k-first");'

But I want to select the tree item with id = 9125. How on earth do you do that? It should be so easy but I just don't get it.

Thanks

10 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 26 Sep 2012, 04:44 PM
Hello Andrew,

To achieve this I can suggest the following approach: 
  • Get the dataItem via the get method of the dataSource;
  • Use the findbyuid method of the TreeView, which searches a TreeView for a node with the given unique identifier;
  • In the select method set the result from the previous step.
var treeview = $("#treeview").data("kendoTreeView");
var getitem = treeview.dataSource.get(9125);
treeview.findByUid(getitem.uid);
var selectitem = treeview.findByUid(getitem.uid);
treeview.select(selectitem);

Regards,

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kuangyi
Top achievements
Rank 1
answered on 26 Sep 2012, 08:14 PM
does .get() work correctly on hierarchical data source?

When I do treeview.dataSource.get() I only get stuff back when I pass in 1, and none of my other ID's will get values back.
0
Andrew
Top achievements
Rank 1
answered on 28 Sep 2012, 10:22 PM
Hi and thank you for your response. Unfortunately it didn't work for me.

I build my tree by creating the list programatically using an iterative append process where the append (with array[i].id=9125) looks like:
  p1.append($('<ul>').append($('<li>')
  .attr({"data-id": array[i].id,"data-cltype": array[i].cltype})
  .addClass("L0" + array[i].level + "_" + array[i].id)
   .append(html).attr({"encoded": false})));

The approach was taken from a Kendo example. It works really well in creating the treeview except it does not appear to generate a datasource (I'm not sure why I thought it would actually) so "var getitem = treeview.dataSource.get(9125);" fails.

I guess I will have to change to a datasource approach if that works with hierarchial data per Kuangyi's comment.

Thanks
0
Iliana Dyankova
Telerik team
answered on 01 Oct 2012, 12:12 PM
Hi guys,

Yes, the get() method of the dataSource works correctly with hierarchical dataSource when the items have id. You can test the suggested approach for example in this online demo (where a hierarchical dataSource is used).

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
P
Top achievements
Rank 1
answered on 06 Nov 2012, 08:13 PM
I also am unable to use get() with an HierarchicalDataSource.
It works if the id value is a top-level node, but it returns undefined if the 'id' is for a child.
Am I missing something?

var t = $("#treeView").data("kendoTreeView");
var ok = t.dataSource.get(1);
var bad = t.dataSource.get(2);  //undefined
var ok2 = t.dataSource.get(5);


All of my items have an id.  I have the datasource defined as such:

 var myTree = new kendo.data.HierarchicalDataSource({
            data: db.bodyPartsTree,
            schema: {
                model: {
                    children: "items",
                    id: "id"
                    }
                }
            });


var bodyPartsTree =  [
    {text: "Brow", id: 1, items: [
            {text: "Epithelium", id: 2 },
            {text: "Eyebrow Hair", id: 3 },
            {text: "Subcutaneous Tissue", id: 4 }
           ] },
    {text: "Cornea", id: 5, items: [
                 {text: "Limbus", id: 6},
                 {text: "Margin", id: 7}
                 ]}
  ]
0
Ivan
Top achievements
Rank 1
answered on 28 Nov 2012, 07:07 AM
I am having same problem:
I try to select node, which is child of root

treeview.dataSource.get(id_not_root_node);

ALWAYS returns undefined

http://jsfiddle.net/JBeQn/43/

We are migrating our old webapp to kendoui.
This moment (programmatically select child node) is really important for us.

Could you please fix this? Are there any workarounds?
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 20 Dec 2012, 08:03 PM
I have exactly the same problem.and desperately need something that works.

dataSource.get() ONLY returns the proper result when the node is in the top level of the hierarchy. Anything lower in the hierarchy returns undefined.

This is on Q2. I had to drop back to Q2 from Q3 because of too many bugs.

Anker
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 20 Dec 2012, 08:12 PM
From examining the dataSource attribute it looks like I can implement my own code by walking the _data structure using the hasChildren and children attributes of each element in the array. I don't like to do it, but if there's no other way I guess I'll have to do it. By walking the data structure I can find the UID if the node and then do a select(findByUid()) of the located UID. Ugly, but it should work.

It is very much preferable to have the get() function work correctly with a hierarchical data source.

Anker
0
Alex Gyoshev
Telerik team
answered on 24 Dec 2012, 08:44 AM
Hello Anker,

The latest internal builds have this implemented. If you encounter a bug in the release, it's wiser to report it and have it fixed rather than keeping the previous version and implementing the functionality in parallel with the library.

Regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan
Top achievements
Rank 1
answered on 15 Jul 2014, 05:29 PM
Kikolova,
I think "var selectitem = treeview.findByUid(getitem.uid);" should be:
var selectitem = treeview.findByUid(getitem.uid)[0];

the "findByUid" returns an array and not just one node to select.
Then you have to do something like this if you want to handle the same event as if you clicked on the tree node:
         var e = { node: selectItem };
         onSelect(e); //call your handler
Tags
TreeView
Asked by
Andrew
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Kuangyi
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
P
Top achievements
Rank 1
Ivan
Top achievements
Rank 1
Anker Berg-Sonne
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Dan
Top achievements
Rank 1
Share this question
or