Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

I want to save RadTreeView state in a cookie

4 Answers 87 Views
Persistence Framework
This is a migrated thread and some comments may be shown as answers.
C
Top achievements
Rank 1
C asked on 12 Jan 2015, 02:32 PM
I have not been able to get this to work. Mainly, I've read this and tried to emulate it: https://demos.telerik.com/aspnet-ajax/persistence-framework/examples/custom-storage-provider/defaultcs.aspx, but haven't gotten this to work.

The problem I'm having is the "state" the StorageProvider tries to store is this:

"<?xml version="1.0"?>
<ArrayOfRadControlState xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <RadControlState>
    <ControlSettings />
    <UniqueId>Telerik.Web.UI_PersistanceManager_CustomSettings</UniqueId>
  </RadControlState>
</ArrayOfRadControlState>"

It does not seem to grab the checkbox data at all! How do I tell it to?


4 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 15 Jan 2015, 11:43 AM
Hi,

RadPresistenceFramework can persist Checked Indices, Expanded Indices, Selected Index  of the RadTreeView. Please look and test the Persisting TreeView Settings demo.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
C
Top achievements
Rank 1
answered on 15 Jan 2015, 01:07 PM
But that example doesn't use cookies?
0
C
Top achievements
Rank 1
answered on 19 Jan 2015, 02:34 PM
Please, someone?
0
Hristo Valyavicharski
Telerik team
answered on 20 Jan 2015, 01:19 PM
Yes, the pointed demo works only with Persistence Framework. Persisting tree state in cookie is not supported out of the box. That's why you will have to implement  this by yourself. 

Here is a sample code you can start with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function pageLoad() {
                loadState();
            }
 
            function loadState() {
 
                var tree = $find("RadTreeView1");
 
                var cookieData = getCookie("tree-data");
                if (cookieData != false) {
                    var state = JSON.parse(cookieData);
                    var nodes = tree.get_allNodes();
                    for (var i = 0; i < state.expandedNodes.length; i++) {
                        for (var j = 0; j < nodes.length; j++) {
                            if (state.expandedNodes[i] == nodes[j]._getHierarchicalIndex()) {
                                nodes[j].expand();
                            }
                        }
                    }
                }
            }
 
            function saveState() {
                var name = "tree-data",
                    data = $("#RadTreeView1_ClientState").val();
 
                document.cookie = name + "=" + data + "; path=/";
            }
 
            function onClientNodeExpanded(sender, args) {
                saveState();
            }
 
            function onClientNodeCollapsed(sender, args) {
                saveState();
            }
            function OnClientNodeClicked(sender, args) {
                saveState();
            }
 
            function getCookie(name) {
                var pattern = RegExp(name + "=.[^;]*")
                matched = document.cookie.match(pattern)
                if (matched) {
                    var cookie = matched[0].split('=')
                    return cookie[1]
                }
                return false
            }
 
            function OnClientNodeChecked(sender, args) {
                saveState();
            }
        </script>
 
        <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="true"
            OnClientNodeCollapsed="onClientNodeCollapsed"
            OnClientNodeClicked="OnClientNodeClicked"
            OnClientNodeChecked="OnClientNodeChecked"
            OnClientNodeExpanded="onClientNodeExpanded">
            <Nodes>
                <telerik:RadTreeNode Text="Root Node 1">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child Node 1.1"></telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Root Node 2"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Root Node 3"></telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </form>
</body>
</html>

Every time you click to exapnd or check a node the client state will be stored in the cookie. Then when page is loaded the state is restored. Note that this code will be working only for expanded nodes.

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Persistence Framework
Asked by
C
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
C
Top achievements
Rank 1
Share this question
or