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