[Solved] Persist TreeView expanded node state

[Donna Stewart]

A while back I entered a ticket requesting help with persisting the treeview state and what was suggested in the answer worked, until I upgraded to the Q1 2011 version.  The ticket id is  393222.  It works on the initial page and treeview load, but when I refresh the tree it does not re-expand the nodes.  Any and all help is very much appreciated!! 

Here is the code:
Controller:

Public Function GetUsers() As JsonResult
    Dim gmcPermissions As New GMCPermissions
    Dim userList As New List(Of GMCDataModel.WebUser)
    Dim companyForUserList As Integer
    Dim users As New List(Of TreeViewItem)
    Dim userDisplayName As String
    Dim isExpanded As Boolean
    ViewData("UserExpandedNodes") = If(Request.Cookies("UserExpandedNodes") IsNot Nothing, HttpUtility.UrlDecode(Request.Cookies("UserExpandedNodes").Value), "")
    ViewData("UserSelectedNode") = If(Request.Cookies("UserSelectedNode") IsNot Nothing, HttpUtility.UrlDecode(Request.Cookies("UserSelectedNode").Value), "")
    If Session("companyListType").Equals("carrier") Then
        companyForUserList = Session("carrierSelected")
    Else
        companyForUserList = Session("customerSelected")
    End If
    userList = gmcPermissions.GetUserList(companyForUserList)
    For Each usr In userList
        If NullS(usr.UserLName).Equals("") And NullS(usr.UserFName).Equals("") Then
            userDisplayName = usr.UserEmailID
        Else
            userDisplayName = usr.UserFName + " " + usr.UserLName
        End If
        isExpanded = ViewData("UserExpandedNodes").Equals(usr.UserKey.ToString())
        If isExpanded Then
            userDisplayName = "<span class='expanded'></span>" + userDisplayName
        End If
        users.Add(New TreeViewItem With {.Text = userDisplayName, .Value = usr.UserKey, .Expanded = isExpanded, .LoadOnDemand = True, .Encoded = False, .Checkable = False})
    Next
    Return New JsonResult() With {.Data = users}
End Function

TreeView:

<%Html.Telerik().TreeView().Name("Users").ShowCheckBox(True).HtmlAttributes(New With {.style = "height:275px; position:relative;"}) _
       .ClientEvents(Function(evt) evt.OnLoad("UsersTreeView_OnLoad")) _
       .BindTo(CType(Model.userList, IEnumerable(Of UserClass)),
           Sub(mappings)
               mappings.For(Of UserClass)(
               Sub(binding)
                  binding _
                  .ItemDataBound(
                  Sub(item, usr)
                     Dim isExpanded As Boolean = ViewData("UserExpandedNodes").Equals(usr.userKey.ToString())
                     Dim isSelected As Boolean = ViewData("UserSelectedNode").Equals(usr.userKey.ToString())
                     If isExpanded Then
                         item.Text = "<span class='expanded'></span>" + usr.userDisplayName
                     Else
                         item.Text = usr.userDisplayName
                     End If
                     If isSelected Then
                         item.Selected = True
                     Else
                         item.Selected = False
                     End If
                     item.Value = usr.userKey
                     item.LoadOnDemand = True
                     item.Encoded = False
                     item.Checkable = False
                 End Sub)
              End Sub)
           End Sub) _
           .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetGroupsForUser", "User")).Render()%>

Javascript:

var treeview = $('#Users');
$("#UserError").replaceWith('<div id="UserError"></div>');
$.post('<%= Url.Action("GetUsers", "User") %>', function (result) { //JavaScript callback executed when the ajax request finishes
    if (result.length < 1) {
        treeview.data('tTreeView').bindTo({ Text: "No users" });
    }
    else {
        treeview.data('tTreeView').bindTo(result);
    }
},
     'json'
);

[Alex Gyoshev]

Hello Donna,

I upgraded the sample project to the recently released Q2 version and it still works. If it doesn't work on your side, please send a working sample solution that replicates your scenario.

Greetings,
Alex Gyoshev
the Telerik team

[Donna Stewart]

Hi,  thank you for looking into this for me.  I upgraded to Q2 2011 and was still having the issue, so I compared my code closely to the sample project and realized I had removed my OnDataBound client event.  Once I put it back in, it is working again.  My apologies for taking up your time with my dumb mistake.   Thank you again!

<%Html.Telerik().TreeView().Name("Users").ShowCheckBox(True).HtmlAttributes(New With {.style = "height:275px; position:relative;"}) _
       .ClientEvents(Function(evt) evt.OnLoad("UsersTreeView_OnLoad")) _
       .ClientEvents(Function(evt) evt.OnDataBound("onUserTreeViewLoad")) _
       .BindTo(CType(Model.userList, IEnumerable(Of UserClass)),
           Sub(mappings)
                  mappings.For(Of UserClass)(
                  Sub(binding)
          binding _
          .ItemDataBound(
          Sub(item, usr)
              Dim isExpanded As Boolean = ViewData("UserExpandedNodes").Equals(usr.userKey.ToString())
              Dim isSelected As Boolean = ViewData("UserSelectedNode").Equals(usr.userKey.ToString())
              If isExpanded Then
                  item.Text = "<span class='expanded'></span>" + usr.userDisplayName
              Else
                  item.Text = usr.userDisplayName
              End If
              If isSelected Then
                  item.Selected = True
              Else
                  item.Selected = False
              End If
              item.Value = usr.userKey
              item.LoadOnDemand = True
              item.Encoded = False
              item.Checkable = False
          End Sub)
      End Sub)
                  End Sub) _
           .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetGroupsForUser", "User")).Render()%>

function onUserTreeViewLoad(e) {
    var treeview = $("#Users").data("tTreeView");

    $(".expanded", treeview.element)
        .each(function () {
            var $this = $(this),
                item = $this.closest(".t-item");
            $this.remove();
            treeview.expand(item);
        });
}