Load on Demand + selected/expanded

[Tx3]

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

[Alex Gyoshev]

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

[Tx3]

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

[Alex Gyoshev]

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

[Tx3]

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.<% } %>

[Alex Gyoshev]

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

[Tx3]

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

[Tx3]

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?

[Alex Gyoshev]

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