This is a migrated thread and some comments may be shown as answers.

Saving a Users layout using Client Side Scripting.

1 Answer 77 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Noel
Top achievements
Rank 2
Noel asked on 22 Nov 2009, 02:19 PM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Pero
Telerik team
answered on 23 Nov 2009, 01:07 PM
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.
Tags
Dock
Asked by
Noel
Top achievements
Rank 2
Answers by
Pero
Telerik team
Share this question
or