How to make selected tree node "sticky"

[Randy Hompesch]

Hi,
We are using a kendo treeview as our main menu in our MVC app.  It's in our default layout.
The question is, how do we keep the currently selected menu item selected and showing as they navigate from controller/view to controller/view? Should we use cookies? Session? Any sample code would be great!
We are trying to get up to speed on Kendo and want to do thing "right" from the get go.
Any help would be great.
Thanks ... Ed

[Dimo]

Hello Ed,

In order to select a TreeView item manually, you should apply a "k-state-selected" class to the <span class="k-in"> element inside the TreeView <li> item element. There is an API method which does this - select().

Selecting a TreeView item triggers a select event. You can obtain the corresponding TreeView dataItem from the item DOM element passed as an event argument.

How exactly the selected item should (or could) be persisted across different pages is a matter of personal preference. Depending on the particular implementation, you may not even have to do this, e.g. if you can retrieve the correct node based on the current page. Consulting on such inquiries is within the scope of our premium support services.

Regards,
Dimo
Telerik

[Dongfen]

Hello,

I have a similar question about how to make selected tree node "sticky".  
But mine is different.  I have a treeview control in the layout view (in the left side).  My main page is on the right side.
For each child tree node, I have an action that open one of views in the right side of the page.
The problem is that every time I click on a node, the whole page got refreshed and I lost the node item that was selected.
I would like to see: either the treeview response in AJAX manner (the treeview not reload), or if it reloads, how can I get what item I selected and make it highlighted.

Here is part of my layout: 


        <div id="body">
            <div id="tree" style="float: left; width: 250px;">
                @{
                    var model = (MvcAppDemo.Models.MenuItemViewModel)Session["NavData"];
                }
                @Html.Partial("_Nav", model)
            </div>
            <div id="mainSection" style="float: right;">
                    @RenderBody()
            </div>
        </div>

And my _Nav view is like this:

@model MvcAppDemo.Models.MenuItemViewModel

@using MvcAppDemo.Models;
@using Kendo.Mvc.UI

<div class="demo-section">
    @(
        Html.Kendo().TreeView()
                .Name("treeview")
                .BindTo(Model.NavItems, mappings =>
                {
                    mappings.For<MenuItemModel>(binding => binding
                            .ItemDataBound((item, menuitem) =>
                            {
                                item.Text = menuitem.ParentItem.DisplayName;
                                item.Expanded = true;                               
                            })
                            .Children(menuitem => menuitem.ChildItems)
                        );

                    mappings.For<ActiveSubModule>(binding => binding
                            .ItemDataBound((item, subitem) =>
                            {
                                item.Text = subitem.DisplayName;
                                item.Action(subitem.SubModuleName, subitem.ControllerName, null);
                                item.Expanded = true;
                            })
                        );
                })
               
    )
</div>
<script type="text/javascript">
    $(function () {
        var treeview = $("#treeview").data("kendoTreeView");
    });

</script>

[Dimo]

Hi Dongfen,

One option is to prevent hyperlink nagivation (page reload) using a TreeView event and load only part of the page with Ajax.

http://docs.telerik.com/kendo-ui/api/web/treeview#events-select

http://docs.telerik.com/kendo-ui/api/web/treeview#events-change

The other option is to leave the page to reload and then select the appropriate TreeView item manually, depending on which is the new page. You can either select the item on the client, or in ItemDataBound with the help of a conditional statement.

Regards,
Dimo
Telerik

[Dongfen]

Thank you.
I can add onSelect and on Change events, but the problem is that I don't know how to firing that item action to the controller inside that OnSelect function.

Do you have any example for partial page load with treeview event while the partial load will go through controller?

Dongfen

[Dimo]

Hi Dongfen,

I am not sure your question is related to Kendo UI. Do you know how to load a partial view without using a TreeView item click, but for example a simple button / hyperlink?

Regards,
Dimo
Telerik

[Dongfen]

Yes, I know how to use partial views.  Actually most of my web pages have partial views.

But in this TreeView, the tree nodes action is defined as (see my code in previous post) - 
  item.Action(subitem.SubModuleName, subitem.ControllerName, null);

So when I click on the nodes, the controller does the work and send back the view, the whole page reloaded and I lost selected tree node (not highlighted).

[Dimo]

Hi Dongfen,

You can use the approach shown below. If you prefer having real hyperlinks, you will need to attach custom click handlers and prevent navigation manually (the TreeView events turned out to be unsuitable for that).

<script>

function onSelect(e) {
    alert($(e.node).data("url"));
}

</script>

@(Html.Kendo().TreeView()
    .Name("treeview")
    .Events(ev => ev.Select("onSelect"))
    .BindTo(Model, mappings =>
    {
        mappings.For<ModelType>(binding => binding
                .ItemDataBound((item, dataItem) =>
                {
                    item.Text = dataItem.Name;
                    item.HtmlAttributes.Add("data-url", @Url.Action("ActionName", "ControllerName"));
                })
            );
    })
)

By the way, inside the ItemAction you can't use fluent methods such as

item.Action(...);

The correct syntax should be

item.ActionName = ...; 
item.ControllerName = ...; 

Regards,
Dimo
Telerik