Save client-side Cloned Dock with StorageProvider

3 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 31 May 2013 Link to this post


    I'm using Js code to clone a dockzone and append it to a div:

      dockZone = $find("<%=RadDockZone_Empty.ClientID %>").clone();
                       dockZoneElement = dockZone.get_element();
                       $telerik.$(dockZoneElement).css("display", "block");
                       $telerik.$(dockZoneElement).css("width", "100%");
                       $telerik.$(dockZoneElement).css("min-height", "155px");

    Then I want to save the layout using StorageProvider.
    ' save the raddocklayout
    "123456", SaveState)

    Private Function SaveState() As String
            Dim dockStates As List(Of DockState) = RadDockLayout1.GetRegisteredDocksState()
            Dim serializer As New JavaScriptSerializer()
            Dim converters As New List(Of JavaScriptConverter)()
            converters.Add(New UnitConverter())
            Dim stateString As String = [String].Empty
            For Each state As DockState In dockStates
                Dim ser As String = serializer.Serialize(state)
                stateString = stateString + "|" + ser
            Return stateString
         End Function

    However the client-side created dockzones and the docks inside the dockzones are not saved.

    I assume the client-side created dockzone cannot be handled by the code-behind's GetRegisteredDocksState ?

    What is the correct method to save the client-side cloned dockzone to the database or to get the serializedState ?


  2. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 03 Jun 2013 Link to this post


    I manage to use SaveState function as below to save the docks state into database.
    But when I pull it out, the cloned docks didn't get to show. 
    function SaveState() {
                   var i;
                   var saveState = "";
                   var AllDocks = get_allRadDocks(); // the docks on the page are referenced
                   for (i = 0; i < AllDocks.length; i++) {
                       var dock = AllDocks[i];
                       saveState += GetSaveState(dock) + "|"; // for every RadDock the save state is appended in the saveState variable
                 // save to database via ajax
    function GetSaveState(dock) { // custom method for collecting the save state
                   var state =
                       UniqueName: dock.get_uniqueName(),
                       DockZoneID: dock.get_dockZoneID(),
                       Width: (dock.get_width() != null) ? dock.get_width() : "",
                       Height: (dock.get_height() != null) ? dock.get_height() : "",
                       ExpandedHeight: dock._expandedHeight,
                       Top: dock.get_top(),
                       Left: dock.get_left(),
                       Resizable: dock.get_resizable().toString(),
                       Closed: dock.get_closed().toString(),
                       Collapsed: dock.get_collapsed().toString(),
                       Pinned: dock.get_pinned().toString(),
                       Title: dock.get_title(),
                       Index: dock.get_index()
                   return Sys.Serialization.JavaScriptSerializer.serialize(state);
    function get_allRadDocks() { // custom method for getting the RadDocks on the page
                   var allRadDocks = [];
                   var allRadControls = $telerik.radControls;
                   for (var i = 0; i < allRadControls.length; i++) {
                       var element = allRadControls[i];
                       if (Telerik.Web.UI.RadDock && element instanceof Telerik.Web.UI.RadDock) {
                           Array.add(allRadDocks, element);
                   return allRadDocks;

  3. Slav
    Slav avatar
    1359 posts

    Posted 05 Jun 2013 Link to this post


    Storing the state of the RadDocks via Built-in Dock State Persistence does not support dynamically created docks. The docks that are persisted through this approach need to be created declaratively on the page.

    The code in your second post will help you get the dock state on the client, nevertheless you need to change the UniqueName of the cloned dock, because it matches that of the original one. There will be problems with persisting the docks state if you have more then one dock with the same UniqueName on the page. Also, the cloned docks should be recreated server-side from the stored dock state on Page_Init (you can check the My Portal demo for reference) otherwise they will not appear after a postback.

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top