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

Load On-Demand Tree, programmatically expand and select node

16 Answers 582 Views

TreeView

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

This question is locked. New answers and comments are not allowed.

Hardy Wang asked on 22 Jun 2011, 01:22 AM

Hi all,
I have a deep tree and I used on-demand load plus Ajax request. The tree node has name and value in pair.

<%= Html.Telerik().TreeView()

.Name('myTree')

.BindTo(Model, (item, category) => {

// bind initial data - can be omitted if there is none

item.Text = category.Name;

item.Value = category.Id.ToString();

item.LoadOnDemand = category.ChildCategory.Count > 0;

})

.DataBinding(dataBinding => dataBinding.Ajax().Select("CategoryAjaxLoading", "CategoryTree"))

.ClientEvents(events => events.OnSelect(onSelectClientEventName))

%>

Now I have a requirement to select a node some levels below. I can do another search on server side to find the path (from top level to leaf node), I think I can use jQuery to request the value array from server side without problem. Now my questions are:

I did some search and I feel it is pretty hard to expand on server side, especially tree to expand on-demand;
How can I select node by value from client side and expand with JavaScript?
When I use JavaScript to expand one level of node, does it trigger a Ajax call to pull next level of items? In this case I have defined Ajax select to invoke controller/action already.
And how can I select a node with JavaScript and trigger OnSelect client event?

So basically you can see I am trying to simulate the expand/select with JavaScript from client side.

Is it possible? Or somebody has some experience to share?

Thanks
Hardy

16 Answers, 1 is accepted

answered on 22 Jun 2011, 11:47 AM

Hello Hardy,

Straight to your questions:

When I use JavaScript to expand one level of node, does it trigger a Ajax call to pull next level of items?
> Yes, it does. You can test for that by going to the LoadOnDemand online demo and running the following script in the console:
$("#AjaxTreeView").data("tTreeView").expand(".t-item");
How can I select node by value from client side and expand with JavaScript?
> Finding a node by its value (let's say, 5) is as follows:
var item = $("#AjaxTreeView").find(".t-input[name='itemValue'][value='5']").closest("div");
... and expanding it,
$("#AjaxTreeView").data("tTreeView").expand(item);
And how can I select a node with JavaScript and trigger OnSelect client event?
> Since you want to trigger the OnSelect event, just trigger a click on the t-in element:
item.find(".t-in:first").trigger("click");

Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 23 Jun 2011, 12:50 AM

Thanks for the information.

I tried with following code

var treeView = $("#myTree").data("tTreeView");

var item = $("#myTree").find(".t-input[name='itemValue'][value='3']").closest("div");

//var item = $("> ul > li", treeView.element)[7];

treeView.expand(item);

The funny thing is that the node is expanded by JavaScript code, but the code simply append all 1st level nodes under the expanded one.

If I comment out 2nd line and uncomment 3rd line in this example I can expand the node and meanwhile I can get proper 2nd level node from my controller/action properly.

Basically both line 2 and line 3 expand the same node in my case.

Any clue?

answered on 24 Jun 2011, 12:09 AM

Selection works, but I have another problem. Let's say item (value=1) is the top level expandable node, item (value=16) is second level expandable node under item (value=1), item (value = 32) is leaf node under item (value=1).

I used following code

var treeView = $("#myTree").data("tTreeView");

var item1 = $("#myTree").find(".t-input[name='itemValue'][value='1']").closest("li");

//var item = $("> ul > li", treeView.element)[7];

treeView.expand(item1);

var item2 = $("#myTree").find(".t-input[name='itemValue'][value='16']").closest("li");

treeView.expand(item2);

var leaf = $("#myTree").find(".t-input[name='itemValue'][value='32']").closest("div");

leaf.find(".t-in:first").trigger("click");

Only top level node is expanded, while nodes loaded on-demand are not expanded and selected.

Any idea?

Thanks

Hardy

answered on 28 Jun 2011, 12:46 AM

Hi,

This is my code to define the Tree

<%= Html.Telerik().TreeView()

.Name("myTree")

.BindTo(Model, (item, category) => {

item.Text = category.Name;

item.Value = category.Id.ToString();

item.LoadOnDemand = category.ChildCategory.Count > 0;

})

.DataBinding(dataBinding => dataBinding.Ajax().Select("CategoryAjaxLoading", "Home"))

.ClientEvents(events => events.OnSelect("onSelect"))

%>

I believe I did not add any animation, but I still could not expand 2nd level node,

I have also changed node click from 'div' to 'li', but I need to mention that if I change code to select a first level leaf node, closet('div') also works, just not leaf nodes from 2nd level.

var leaf = $("#myTree").find(".t-input[name='itemValue'][value='32']").closest("li");

leaf.find(".t-in:first").trigger("click");

Any idea?

answered on 29 Jun 2011, 12:59 AM

TelerikTreeTest.zip

Hi Alex,

It does not work. I attached my sample project for your reference:

Unzip the file to any folder;
There is a database.sql file in the same folder where solution file is found;
Run the script in SQL 2008 or SQL 2008 Express to create a table and populate sample data;
Open solution and modify connection string in web.config to point to your new test database;

On that view there is a button, you can click to trigger the expand and click of nodes.

Please let me know anything wrong with my code.

Thanks

Hardy

Accepted

answered on 29 Jun 2011, 02:13 PM

TelerikTreeTest.zip

Hello Hardy Wang,

Indeed, in order for this to work, your code needs to wait until each of the requests finishes. Doing this on the client-side requires you to listen to the databound event:

$(document).ready(function () {

$('#myButton').click(expand);

});

function itemByValue(val) {

return $("#myTree").find(".t-input[name='itemValue'][value='" + val + "']").closest("li");

}

function expandSequence(treeview, seq) {

var $element = $(treeview.element),

currentItem = itemByValue(seq.shift());

if (seq.length == 0) {

currentItem.find(".t-in:first").trigger("click");

} else {

treeview.expand(currentItem);

$element.bind("dataBound", function dataBoundHandler() {

$element.unbind("dataBound", dataBoundHandler);

expandSequence(treeview, seq);

});

}

function expand() {

expandSequence($("#myTree").data("tTreeView"), [1, 16, 31]);

}

You can find the modified project attached. The expandSequence function expands a tree of items - in the above case, items 1, then 16, then 31.

Kind regards,
Alex Gyoshev
the Telerik team

answered on 30 Jun 2011, 08:06 AM

Hello Hardy,

I'm glad it works!

treeview.element is the outer element of the treeview - i.e. the element with the ID. I used it for convenience, so that the method does not query the DOM for a specific TreeView (and thus, it can be reused)
bind / unbind are jQuery methods that attach / detach event handlers for the treeview client-side events (in this case, the dataBound event)

Regards,
Alex Gyoshev
the Telerik team