Dock - Load/Save Layout

Databound control
  • Collapse
  • Close
Item
one
two
three
Text
  • Collapse
  • Close
This is a dock with some text inside

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Persisting the Dock Layout

The API of RadDockLayout provides developers with the ability to save the positions of the dock objects on the page in various storage mediums, such as Database, Session, Cookie, etc. To accomplish such a scenario, you should use the LoadDockLayout and SaveDockLayout events.

The example above saves the DockLayout in a cookie when the "Save Current Layout" button is clicked. The user can reset the DockLayout to a predefined one by pressing the "Reset Layout" button.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • UnitConverter.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.LoadSaveState.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" />
    <div class="demo-container size-wide">
        <telerik:RadDockLayout runat="server" EnableViewState="false" ID="RadDockLayout1"
            OnLoadDockLayout="RadDockLayout1_LoadDockLayout" StoreLayoutInViewState="false">
            <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="vertical" CssClass="dock-zone">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock3" Title="Databound control" Width="300px" CssClass="higherZIndex">
                    <ContentTemplate>
                        <asp:GridView runat="server" ID="GridView1" Width="100%">
                        </asp:GridView>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="vertical" CssClass="dock-zone">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock2" Title="Text" Height="80px" Width="300px"
                    Text="This is a dock with some text inside" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:Button ID="btnSaveState" runat="server" Text="Save Current Layout" OnClick="btnSaveState_Click" />
                <qsf:Button ID="btnReset" runat="server" Text="Reset Layout" OnClick="btnReset_Click" />
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?