Moving a Dynamically created Dock between Zones

[Jason]

I'm trying to move a dynamically created Dock from One Zone (not dynamic) to another

Getting some weird results; after the post back the

1. dragged Dock just floats to the top of the screen.

2. the dock expands in the source zone and it un-clickable

3. if i use the ApplyState (ala the demo and many posts), the ViewState becomes corrupt, and the RadGrid on the page fires the NeedsDataSource after every postback

4. get a

There is quite a lot of code to post, so i've linked a sample project that demonstrates the problem

Project

 

--Jason

i'm fairly certain this is a noob error, but i cant see it

[Vessy]

Hello Jason,

The most probable reason for the faced behavior is caused due to the Static IDs used for the Telerik controls on the page. It is recommended by Microsoft to use ClientIDMode set to Static only for static controls.The controls from the UI for ASP.NET AJAX suite on the other hand are controls with complex hierarchies of child controls and templates so setting their ClientIDMode property to Static breaks their functionality. Can you, please, set the ClientIDMode = "AutoID" property of all controls on the page and see if the problem persists?

You can read more details on this matter here:
https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#setting-clientidmode-property-to-static-breaks-the-telerik-controls-functionality

Regards,
Vessy
Progress Telerik

[Jason]

Hi Vessy

 

Thanks for helping me look into this.

After the change, I'm now getting this error

Invalid JSON primitive: . Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentException: Invalid JSON primitive: .

It occurs on the second drag-and-drop.

The first drag-and-drop  transfers the Dock to the new Zone, but leaves an expanded Dock that is unclickable in the source zone

The second drag-and-drop throws the above error

At least i'm getting a new error now :)

 

[Vessy]

Hi Jason,

The thrown error is related to the way the IDs of the dynamically created Docks are created. When a dock is dragged and, respectively, cloned it is created with the same ID as the originating dock, thus the JSON error is thrown as the application does not accept controls with the same IDs. A possible approach to avoid this limitation is demonstrated in the following live demo: https://demos.telerik.com/aspnet-ajax/dock/examples/dynamicdocks/defaultcs.aspx

private RadDock CreateRadDockFromState(DockState state)
       {
           RadDock dock = new RadDock();
           dock.DockMode = DockMode.Docked;
           dock.ID = string.Format("RadDock{0}", state.UniqueName);
           dock.ApplyState(state);
           dock.Commands.Add(new DockCloseCommand());
           dock.Commands.Add(new DockExpandCollapseCommand());

           return dock;
       }

You can review the whole source code of the demo in a similar location (after installing the Demos App):
c:\Program Files (x86)\Progress\Telerik UI for ASP.NET AJAX R2 2018\Live Demos\Dock\Examples\DynamicDocks

Regards,
Vessy
Progress Telerik

[Jason]

Thanks

that worked like a charm

so, next problem !

When the position_changed event fires, i am attempting to move the Dock from one Layout to another. It all seems to work, but the method GetRegisteredDocksState() does not include the recently moved dock

private void Widget_PositionChanged(object sender, DockPositionChangedEventArgs e)
{
    RadDock lWidget = (RadDock)sender;

    // Move the raddock to the appropriate zone
    RadDockZone lDestinationZone = (RadDockZone)FindControlRecursive(this.Page, e.DockZoneID);
    RadDockLayout lDestinationLayout = lDestinationZone.Parent is RadDockLayout ? (RadDockLayout)lDestinationZone.Parent : null;

    RadDockZone lSourceZone = (RadDockZone)FindControlRecursive(this.Page, lWidget.DockZoneID);

    if (lWidget.DockZoneID != e.DockZoneID && !string.IsNullOrWhiteSpace(lWidget.DockZoneID))
    {
        lSourceZone.Docks.Remove(lWidget);
        lDestinationLayout.Controls.Add(lWidget);
        lWidget.Dock(lDestinationZone);

        WidgetDockStates["docAvailableWidgetLayout"] = docAvailableWidgetLayout.GetRegisteredDocksState(true);
        WidgetDockStates["dockLayout1"] = dockLayout1.GetRegisteredDocksState(true);
    }
}

 

thanks in advance.

 

 

 

[Vessy]

Hi Jason,

I will be glad to help you in your new query, but I will need to debug the exact problem at my end. for this I will need the updated version of the code (including the implemented state-related ID) and any other logic needed to reproduce the issue. Please, send me the updated version of the previously attached sample, so I can debug the root of the problem and advice you on its resolving (if possible).

On a side note, I would like to kindly ask you to open separate support tickets for each issue your are facing, so we can keep the threads consistent. Thank you for your understanding.

Regards,
Vessy
Progress Telerik

[Jason]

Thanks Vessy

Here is a link to the updated solution Code (Version 2)

No problem opening separate tickets; I've kept this one going because it's the same problem for me.

Whats your criteria for opening new tickets?

[Vessy]

Hi Jason,

Thank you for the updated sample. In order to update the Dock state you should add the Dock to update itself  in a way similar to the CreateSaveStateTrigger() method implemented in the following demo:
https://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx

As the currently used RadAjaxPanel has no triggers, but you can use either RadAjaxManager or asp:UpdatePanel  instead (like in the demo above). In this case you will be able to define AJAX initiators and updated controls in a lot more flexible way. For example, implementing the following changes to the page where the dock widgets are created will allow you to store the updated state properly:

1. Replace the RadAjaxPanel with an UpdatePanel in conditional mode:
   

   <asp:UpdatePanel ID="dashboardAjaxPanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
       <ContentTemplate>
           ...
       </ContentTemplate>
   </asp:UpdatePanel>

2. Add the following method to the code-behind:
   

   private void CreateSaveStateTrigger(RadDock dock)
   {
       //Ensure that the RadDock control will initiate postback
       // when its position changes on the client or any of the commands is clicked.
       //Using the trigger we will "ajaxify" that postback.
       dock.AutoPostBack = true;
       dock.CommandsAutoPostBack = true;
   
       AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
       saveStateTrigger.ControlID = dock.ID;
       saveStateTrigger.EventName = "DockPositionChanged";
       dashboardAjaxPanel.Triggers.Add(saveStateTrigger);
   
       saveStateTrigger = new AsyncPostBackTrigger();
       saveStateTrigger.ControlID = dock.ID;
       saveStateTrigger.EventName = "Command";
       dashboardAjaxPanel.Triggers.Add(saveStateTrigger);
   }

3. Call the method after the creation of each widget:
   

   private void Widget_PositionChanged(object sender, DockPositionChangedEventArgs e)
   {
       RadDock lWidget = (RadDock)sender;
   
       // Move the raddock to the appropriate zone
       RadDockZone lDestinationZone = (RadDockZone)FindControlRecursive(this.Page, e.DockZoneID);
       RadDockLayout lDestinationLayout = lDestinationZone.Parent is RadDockLayout ? (RadDockLayout)lDestinationZone.Parent : null;
       RadDockZone lSourceZone = (RadDockZone)FindControlRecursive(this.Page, lWidget.DockZoneID);
   
       if (lWidget.DockZoneID != e.DockZoneID && !string.IsNullOrWhiteSpace(lWidget.DockZoneID))
       {
           lSourceZone.Docks.Remove(lWidget);
   
           lDestinationLayout.Controls.Add(lWidget);
   
           lWidget.Dock(lDestinationZone);
           CreateSaveStateTrigger(lWidget);
   
           WidgetDockStates["docAvailableWidgetLayout"] = docAvailableWidgetLayout.GetRegisteredDocksState();
           WidgetDockStates["dockLayout1"] = dockLayout1.GetRegisteredDocksState();
       }
   }

As per the ticked separation - basically, each major question that is not related to the initial issue of a thread is considered as a new matter. We understand that the problems are often connected as they are based on the same controls/scenario/application, but separating the questions helps us a lot to provide better and faster assistance. I hope this sheds some light on the subject.

Regards,
Vessy
Progress Telerik

[Jason]

Thank you!

Thank you!

Thank you!

Everything is now working as expected.

I really appreciate your expert help.

 

[Vessy]

Hi,

You are welcome, Jason - I am glad everything is working properly now :)

Regards,
Vessy
Progress Telerik