<%@ 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>
<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>