New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Load/Save Layout

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

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

Support & Learning Resources

Find Assistance