Saving a Users layout using Client Side Scripting.

2 posts, 1 answers
  1. Noel
    Noel avatar
    2 posts
    Member since:
    Aug 2009

    Posted 22 Nov 2009 Link to this post

    Hello there,

    We are using RadDock controls to build a web portal as an extension to our already existing website.

    When a user logs in to the portal for the first time, he is presented with a default layout which is stored and generated from the database.

    There are 2 zones on the page (namely left and right) and the user is able to move the raddock controls vertically within these zones. Once he has finished this, he clicks on a "Save layout" button which generates a string (this string is in RadDock recognised format) containing all the RadDocks on a page, their positions and indices. This string is then saved to the database along with the User's ID.

    The user logs out and returns some time in the future. The system (our "Load Layout" functionality) checks to see if a layout attached to that user exists before presenting the default layout. If a layout exists, the page is generated according to that layout else it is presented in the default layout.

    All this is fine and working according to our requirements. However, If the user moves to another section of the same website, the layout is lost.

    I have tried the DockPositionChanged event and realised that it requires an autopostback to function properly. This is against the guidelines of our "User experience" as it would involve too many postbacks. I have also found out that the page unload event is not the correct place to do this kind of an job.

    Both of the above were server side scripts. I have found out about the OnClientDockPositionChanged and I believe this may be able to meet our requirements. However, I was wondering if I could get any specific references to the Client side (javascript) script involved in generating the string containing information of all docks on the page. In simple words, a javascript version of the 'GetRegisteredDocksState' and its implementation, as shown in the 'SaveLayout' demo.

    Thanks in advance.

    Noel
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 23 Nov 2009 Link to this post

    Hello Noel,

    I think the method you are looking is dock.saveClientState(). This method returns a string that represents the dock state. For example in the following project the state is alerted when the page is initialized:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
     
        <script type="text/javascript">
            function OnClientInitialize(dock, args)
            {
                alert(dock.saveClientState());
            }
        </script>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        OnClientInitialize="OnClientInitialize">
                        <Commands>
                            <telerik:DockCloseCommand />
                            <telerik:DockExpandCollapseCommand />
                        </Commands>
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"
                        OnClientInitialize="OnClientInitialize" Closed="true">
                        <Commands>
                            <telerik:DockCloseCommand />
                            <telerik:DockExpandCollapseCommand />
                        </Commands>
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    If you have other questions please do contact us.


    Best wishes,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top