Save client-side Cloned Dock with StorageProvider

[HSLaw]

Hi,

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");
  document.getElementById("test").appendChild(dockZoneElement);

Then I want to save the layout using StorageProvider.

' save the raddocklayout
RadDockLayout1.StorageProvider.SaveStateToStorage("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())

        serializer.RegisterConverters(converters)

 

        Dim stateString As String = [String].Empty

        For Each state As DockState In dockStates

            Dim ser As String = serializer.Serialize(state)

            stateString = stateString + "|" + ser

        Next

        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 ?

Thanks.

[HSLaw]

Hi,

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

[Slav]

Hi,

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.

Regards,
Slav
Telerik