I want to save RadTreeView state in a cookie

5 posts, 0 answers
  1. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 12 Jan 2015 Link to this post

    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?


  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 15 Jan 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 15 Jan 2015 in reply to Hristo Valyavicharski Link to this post

    But that example doesn't use cookies?
  5. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 19 Jan 2015 Link to this post

    Please, someone?
  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 20 Jan 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017