[Solved] Persisting TreeView State

[Donna Stewart]

Hi,

I am trying to implement persisting treeview state in cookie found in the Knowledge Base (http://www.telerik.com/support/kb/aspnet-mvc/treeview/persisting-treeview-state-in-cookie.aspx) and this is not working for me.  Does this work if the nodes have LoadOnDemand?  I need to be able to persist the TreeView on post.  This means having the expanded items come back expanded and the checked items come back checked. (I haven't yet implemented the checked items code, which I have seen and know you have in your demo code.)  I was trying to get the expanded nodes code to work first.  Could it be that I need to do something differently since I am using LoadOnDemand?  I know the code that sets the cookie and then puts it into ViewData works...  Your  help is very much appreciated! 

Thank you!
Donna

Code snippets:
TreeView

<%= Html.Telerik().TreeView().Name("WTGroupNames").ShowCheckBox(True).HtmlAttributes(New With {.style = "width:250px; height:550px;"}) _
                 .ClientEvents(Function(evt) evt.OnSelect("getUserGroupsForTaskGroup")) _
                 .ClientEvents(Function(evt) evt.OnCollapse("updateTreeViewState")) _
                 .ClientEvents(Function(evt) evt.OnExpand("updateTreeViewState")) _
                 .BindTo(CType(Model.wtGoupNames, IEnumerable(Of SelectListItem)),
                                 Sub(mappings) mappings.For(Of SelectListItem)
                                   (Sub(binding) binding _
                                       .ItemDataBound(
                                            Sub(item, linkGroup)
                                              item.Text = linkGroup.Text
                                              item.Value = linkGroup.Value
                                              item.LoadOnDemand = True
                                              item.Expanded = DirectCast(ViewData("ExpandedNodes"), String()).Contains(linkGroup.Text)
                                            End Sub)
                                    End Sub)
                                  End Sub) _
                .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetTasksForGroup", "WebTask"))
 %>

javascript for client events

       function updateTreeViewState(e) {
           var expandedNodes = $.cookie('ExpandedNodes');
           expandedNodes = expandedNodes ? expandedNodes.split(';') : [];
           var itemIndex = $.inArray($(e.item).text(), expandedNodes);
           if (e.type == "expand" && itemIndex == -1)
               expandedNodes.push($(e.item).text());
           else if (e.type == "collapse" && itemIndex >= 0)
               expandedNodes.splice(itemIndex, 1);
           $.cookie('ExpandedNodes', expandedNodes.join(';'));
}

Controller

Function AddTasksToGroups(ByVal collection As FormCollection) As ActionResult
    Try
        Dim tasks As String = collection.Get("tasks[]")
        Dim groups As String = collection.Get("groups[]")
        Dim taskArray As Array = tasks.Split(",")
        Dim groupArray As Array = groups.Split(",")
        Dim groupList As New List(Of Integer)
        Dim taskList As New List(Of Integer)
        Dim statusReturn As New com.gmcps.StatusReturn
        Dim myArray() = New String() {}
        For i As Integer = 0 To groupArray.Length - 1
            groupList.Add(CInt(groupArray(i)))
        Next
        For i As Integer = 0 To taskArray.Length - 1
            taskList.Add(CInt(taskArray(i)))
        Next
        Dim gmcPermissions As New GMCPermissions
        If Not Request.Cookies("ExpandedNodes") Is Nothing Then
            ViewData("ExpandedNodes") = HttpUtility.UrlDecode(Request.Cookies("ExpandedNodes").Value).Split(";")
        Else
            ViewData("ExpandedNodes") = myArray
        End If
        statusReturn = gmcPermissions.AssignWebTasksToWebTaskGroupName(taskList, groupList)
        If statusReturn.StatusCode.Equals(com.gmcps.StatusReturn.StatusCodes.SUCCESS) Then
            Return RedirectToAction("Index")
        End If
        Return View("Error")
    Catch
        Return View()
    End Try
End Function

[Alex Gyoshev]

Hello Donna,

Since you are using LoadOnDemand, the expanded nodes have to be requested when the page loads, or be sent initially from the server. Since the first approach would seem awkward to the user (i.e. the page loads, then the treeview performs several AJAX requests in order to get to the needed data), I would recommend the second approach.

The whole approach takes place in the BindTo method. Basically, you should check whether the current item is in the ViewData("ExpandedNodes") collection, and if it is, you should expand it and not make it a LoadOnDemand node.

If you need help in implementing this approach, please send your project so that we can apply the work-around.

Regards,
Alex Gyoshev
the Telerik team

[Donna Stewart]

Thank you Alex.  I am pretty sure I know what you mean, but I am not quite sure how to get the data for the expanded node on the post back.  I would like to keep the Load On Demand functionality and I'm thinking when the node is collapsed (after postback) I could set LoadOnDemand back to true.  Would that work?   I tried to attach my zipped project, but it is too big (11MB).  Can I email it to you?  I really do appreciate your help!

Thank you,
Donna

[Alex Gyoshev]

Hello Donna,

You can open a support ticket and attach your project there. Just mention this thread.

Kind regards,
Alex Gyoshev
the Telerik team

[Donna Stewart]

I have opened a support ticket and attached my project.  The ticket is 393222.

Thank you again!