How to make selected tree node "sticky"

8 posts, 0 answers
  1. Randy Hompesch
    Randy Hompesch avatar
    44 posts
    Member since:
    Nov 2008

    Posted 22 Jul 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dongfen
    Dongfen avatar
    19 posts
    Member since:
    Dec 2012

    Posted 19 Feb 2014 Link to this post

    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>















  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dongfen
    Dongfen avatar
    19 posts
    Member since:
    Dec 2012

    Posted 20 Feb 2014 in reply to Dimo Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Dongfen
    Dongfen avatar
    19 posts
    Member since:
    Dec 2012

    Posted 24 Feb 2014 in reply to Dimo Link to this post

    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).




  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 26 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready