PersistenceFramework - Custom Settings

Use the Show Window button to display RadWindow. After moving the control around, resizing or executing any command on it, use the Save State button. Test the Persistence Framework by reloading the page.
Initial position
of the window
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

In this example you can see how to preserve the state of Telerik’s ASP.NET Window control using the custom settings feature of Persistence Framework. The funcitonality allows you to save custom settings as a KeyValuePair<string, ControlSetting> along with the controls configured for persistence and is useful when you need to save the state of controls that are client-side configurable and / or are not supported by the Persistence Framework.

In order to save/load custom settings you need to handle the PersistenceManager’s server-side events:

  • OnSaveCustomSettings - Raised when the RadPersistenceManager saves the state.
  • OnLoadCustomSettings - Raised when the RadPersistenceManager loads the state.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"
    Inherits="PersistenceFramework_Examples_CustomSettings_DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <asp:HiddenField ID="wndStateHolder" runat="server" />
    <telerik:RadPersistenceManager ID="persistenceMngr" runat="server"
        OnSaveCustomSettings="persistenceMngr_SaveCustomSettings" OnLoadCustomSettings="persistenceMngr_LoadCustomSettings">
    </telerik:RadPersistenceManager>
    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" OpenerElementID="wndOpenerBtn"
        OnClientShow="wndShow" OnClientResizeEnd="wndStateChanged" OnClientDragEnd="wndStateChanged"
        OnClientCommand="wndCommand" OnClientClose="wndStateChanged"
        OffsetElementID="wndInitialPosition" Top="10px" Left="10px" Width="330px" Height="300px" VisibleStatusbar="false">
        <ContentTemplate>
            <div id="wndContent">
                You can play around with this RadWindow (move it, resize it), then click <strong>Save State</strong>.
                Test the <em>Persistence Framework</em> by <strong>reloading the page</strong>, <strong>showing the RadWindow</strong> and
                clicking <strong>Load State</strong>. It will be reverted to the state that was just saved.
            </div>
        </ContentTemplate>
    </telerik:RadWindow>
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        Use the <em>Show Window</em> button to display RadWindow. After moving the control around, resizing or executing any command on it, use the <em>Save State</em> button. Test the Persistence Framework by reloading the page.
    </qsf:MessageBox>
    <div class="demo-container size-narrow">
        <telerik:RadButton RenderMode="Lightweight" ID="saveBtn" Text="Save State" runat="server" OnClick="saveBtn_Click">
        </telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" ID="loadBtn" Text="Load State" runat="server" OnClick="loadBtn_Click">
        </telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" ID="resetBtn" Text="Reset State" runat="server" OnClick="resetBtn_Click">
        </telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" ID="wndOpenerBtn" Text="Show Window" runat="server"
            AutoPostBack="false" OnClientClicked="showWnd">
        </telerik:RadButton>
        <div id="wndWrapper">
            <div id="wndInitialPosition">
                Initial position<br />
                of the window
            </div>
        </div>
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            var isRestoringPosition = false;

            function wndShow(wnd) {
                var state = getStateData();
                if (state)
                    applyWindowState(wnd, state);
            }

            function wndCommand(wnd, args) {
                if (isRestoringPosition) return;

                setTimeout(function () { updateState(wnd, $get("<%=wndStateHolder.ClientID %>")); }, 0);
            }

            function wndStateChanged(wnd) {
                updateState(wnd, $get("<%=wndStateHolder.ClientID %>"))
            }

            function applyWindowState(wnd, state) {
                isRestoringPosition = true;

                if (state.width && state.height)
                    wnd.setSize(state.width, state.height);

                if (state.left && state.top)
                    wnd.moveTo(parseInt(state.left), parseInt(state.top));

                if (state.pinned != wnd.isPinned())
                    wnd.togglePin();

                if (state.maximized == true)
                    wnd.maximize();
                else if (state.minimized == true)
                    wnd.minimize()

                isRestoringPosition = false;
            }

            function updateState(wnd, container) {
                var wndBounds = wnd.getWindowBounds();
                var wndState =
                {
                    width: wndBounds.width,
                    height: wndBounds.height,
                    left: wndBounds.x,
                    top: wndBounds.y,
                    pinned: wnd.isPinned(),
                    minimized: wnd.isMinimized(),
                    maximized: wnd.isMaximized(),
                    visible: wnd.isVisible(),
                    uniqueId: wnd.get_id()
                }

                if (window.JSON && window.JSON.stringify) //in case the browser supports JSON natively (modern browsers, IE8 and above)
                {
                    container.value = JSON.stringify(wndState);
                }
                else //the browser does not support JSON natively, create the string manually or use an external library
                {
                    container.value = "{\"uniqueId\":\"" + wndState.uniqueId + "\", \"width\":\"" + wndState.width + "\", \"height\":\"" + wndState.height + "\", \"left\":\"" + wndState.left + "\", \"top\": \"" + wndState.top + "\", \"minimized\": " + wndState.minimized + ", \"maximized\": " + wndState.maximized + ", \"visible\": " + wndState.visible + "}";
                }
            }

            function showWnd() {
                var wnd = $find("<%= RadWindow1.ClientID %>");
                if (wnd)
                    wnd.show();
            }

            function getStateData() {
                var stateStr = $get("<%=wndStateHolder.ClientID %>").value;

                if (stateStr)
                    return $telerik.$.parseJSON($get("<%=wndStateHolder.ClientID %>").value);
                else
                    return null;
            }

            //restore the visible state
            Sys.Application.add_load(restoreVisibleWnd);

            function restoreVisibleWnd() {
                Sys.Application.remove_load(restoreVisibleWnd);

                var state = getStateData();

                if (state && state.uniqueId && state.visible) {
                    setTimeout(function () {
                        $find(state.uniqueId).show();
                    }, 0);
                }
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?