This is a migrated thread and some comments may be shown as answers.
Load on Demand + selected/expanded
8 Answers 195 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Tx3
Top achievements
Rank 1
Tx3 asked on 12 Oct 2010, 09:53 AM
Hi,

I have successfully used On demand TreeView, but now I need to show certain item from the tree. This of course means that I have to Expand correct branches and finally select correct leaf. This was easy when I had normal model binding without on demand functionality.

Below is my View. What I try to is that I provide selected row in the Value of the TreeViewItem.

<%= Html.Telerik().TreeView()
    .Name("TreeView")
    .BindTo(Model.Products, (item, product) =>
    {
        item.Value = product.Id.ToString() + Constants.tree_view_value_separator + product.SelectedRowId.ToString();
        item.Selected = product.IsSelected;
        item.Expanded = product.IsExpanded;
        item.Encoded = false;
        item.Text = ProductHelper.GetProductContent(product);
        item.LoadOnDemand = product.HasChildProductVersions;
    })
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Enabled(true)
        .Select("GetProductVersions", Constants.ctrl_Product))
    .HtmlAttributes(new { id = "myGridControl" })
    .ClientEvents(events => events.OnLoad("treeOnLoad"))
    %>

And after parsing value in the Controller.. I'll set Selected. Now I should somehow expand all parent branches. Any ideas how can I do that?

var productVersionRows = from productVersion in productVersions
                         select new TreeViewItem
                         {
                             Text = GetProductVersionRow(productVersion, depth, urlHelper),
                             Value = productVersion.ProductVersionId.ToString() + Constants.tree_view_value_separator + selectedRowId,
                             LoadOnDemand = productVersionModel.HasChildProductVersions(productVersion.ProductVersionId),
                             Encoded = false,
                             Selected = selectedRowId == productVersion.ProductVersionId
                         };

Thanks,
Tatu

8 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 14 Oct 2010, 10:08 AM
Hello Tatu,

Does setting the Expanded property of the items not work? Please try the attached build (we have refactored the client-side rendering a bit -- it might have fixed the problem). If that doesn't help, please send a sample solution that shows your scenario.

Best wishes,
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
0
Tx3
Top achievements
Rank 1
answered on 14 Oct 2010, 12:14 PM
I have a question before I test hot fix.

Let's say I have following TreeView (with on-demand functionality) and user has expanded A and 1.1 then selected 1.1.1
-A
     -1.1
            -1.1.1
+B

Now user goes to other view and system stores selected (1.1.1). User goes back to the TreeView and I want to show A and 1.1 expanded then 1.1.1 selected.

How can I set selected (1.1.1) to the items that are loaded on-demand?

Because now the situation is that I'll get initial state instead of "picture above".

+A
+B
0
Alex Gyoshev
Telerik team
answered on 14 Oct 2010, 01:18 PM
Hi Tatu,

If you are rendering the TreeView from the server, you should expand the nodes that you wish to be opened (manually, through code in the controller). Otherwise you'll need to pull the required data through another AJAX request or store the expanded states in a cookie.

Best wishes,
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
0
Tx3
Top achievements
Rank 1
answered on 25 Oct 2010, 07:46 AM

Hi,

I have now installed hot fix and I still have a problem. Let's say that I'll force item.Expanded to True (LoadOnDemand is also true). What I expect is that item will be expanded and children are loaded automatically using Ajax (on-demand). Even in this simple scenario nothing happens. If I force item.Selected to True that one works like expected. 

It seems that Telerik TreeView doesn't support expand when using on-demand?

01.<%= Html.Telerik().TreeView()
02.    .Name("TreeView")
03.    .BindTo(Model.Products, (item, product) =>
04.    {
05.        item.Value = product.Id.ToString() + Constants.tree_view_value_separator + product.SelectedRowId.ToString();
06.        item.Selected = product.IsSelected;
07.        item.Expanded = product.IsExpanded;  <-- Always true
08.        item.Encoded = false;
09.        item.Text = ProductHelper.GetProductContent(product);
10.        item.LoadOnDemand = product.HasChildProductVersions;
11.    })
12.    .DataBinding(dataBinding => dataBinding.Ajax()
13.        .Enabled(true)
14.        .Select("GetProductVersions", Constants.ctrl_Product))
15.    .HtmlAttributes(new { id = "myGridControl" })
16.    .ClientEvents(events => events.OnLoad("treeOnLoad"))
17.    %>
18.<% } %>
0
Alex Gyoshev
Telerik team
answered on 25 Oct 2010, 02:46 PM
Hi Tatu,

Indeed, it doesn't automatically expand them. Use the onLoad client-side event to expand the required nodes by using the expand client-side method, or bind the TreeView to the expanded collection on the server.

The first work-around can be achieved as follows:

function onLoad() {
    $(this).data('tTreeView').expand('.t-item'); // will expand all initial items
}

Kind 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
0
Tx3
Top achievements
Rank 1
answered on 27 Oct 2010, 06:47 AM

Thanks for the source code. I didn't want to expand all, only those that are really expanded. I don't know is this the most clean solution, but I did it like this:

01.<%= Html.Telerik().TreeView()
02.    .Name("TreeView")
03.    .BindTo(Model.Products, (item, product) =>
04.    {
05.        item.Value = product.Id.ToString() + Constants.tree_view_value_separator + product.SelectedRowId.ToString();
06.        item.HtmlAttributes["isExpanded"] = product.IsExpanded;
07.        item.Selected = product.IsSelected;
08.        item.Expanded = product.IsExpanded;
09.        item.Encoded = false;
10.        item.Text = ProductHelper.GetProductContent(product);
11.        item.LoadOnDemand = product.HasChildProductVersions;
12.    })
13.    .DataBinding(dataBinding => dataBinding.Ajax()
14.        .Enabled(true)
15.        .Select("GetProductVersions", Constants.ctrl_Product))
16.    .HtmlAttributes(new { id = "myGridControl" })
17.    .ClientEvents(events => events.OnLoad("treeOnLoad"))
18.    %>
19.<% } %>

And then in the treeOnLoad method:

1.// expand tree items
2.$(this).data('tTreeView').expand('.t-item[isExpanded="True"]');

-Tatu

0
Tx3
Top achievements
Rank 1
answered on 27 Oct 2010, 08:13 AM

There is another problem.

OnExpand event is not triggered when data is loaded on-demand. If I close the branch and open it again (data already loaded) then event is triggered. Is there any way to fix this behavior?

0
Alex Gyoshev
Telerik team
answered on 27 Oct 2010, 04:22 PM
Hi Tatu,

Thank you for reporting that. It will be fixed for the official Q3 release. Until then, you can patch the TreeView nodeToggle method like this: replace the:
    else if (isExpanding && this.isAjax() && (contents.length == 0 || $item.data('loaded') === false))
                this.ajaxRequest($item);


which can be found at the end of the method, with:
    else if (isExpanding && this.isAjax() && (contents.length == 0 || $item.data('loaded') === false)) {
        if (!$t.trigger(this.element, isExpanding ? 'expand' : 'collapse', { item: $item[0] }))
            this.ajaxRequest($item);
        }


Just a side-note -- if you need to get the data after it has been loaded, you will need to use the dataBound event.

Your Telerik points have been updated for the report.

Best wishes,
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
Tags
TreeView
Asked by
Tx3
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Tx3
Top achievements
Rank 1
Share this question
or