RadDockLayout cannot persists its state if contains more than 9 docks.
Code to reproduce (if one of RadDocks is removed the state will be persisted properly):
<telerik:RadDockLayout runat="server" ID="RadDockLayout1" EnableLayoutPersistence="true" RenderingMode="Lightweight"
LayoutPersistenceRepositoryType="Cookies" LayoutRepositoryID="repID20210406_1">
<telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server"
UniqueName="RadDock1" AutoPostBack="true">
<ContentTemplate>
dock 1
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server"
UniqueName="RadDock2" AutoPostBack="true">
<ContentTemplate>
dock 2
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock3" runat="server"
UniqueName="RadDock3" AutoPostBack="true">
<ContentTemplate>
dock 3
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock4" runat="server"
UniqueName="RadDock4" AutoPostBack="true">
<ContentTemplate>
dock 4
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock5" runat="server"
UniqueName="RadDock5" AutoPostBack="true">
<ContentTemplate>
dock 5
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock6" runat="server"
UniqueName="RadDock6" AutoPostBack="true">
<ContentTemplate>
dock 6
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock7" runat="server"
UniqueName="RadDock7" AutoPostBack="true">
<ContentTemplate>
dock 7
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock8" runat="server"
UniqueName="RadDock8" AutoPostBack="true">
<ContentTemplate>
dock 8
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock9" runat="server"
UniqueName="RadDock9" AutoPostBack="true">
<ContentTemplate>
dock 9
</ContentTemplate>
</telerik:RadDock>
<%--The state will be persisted of you comment the dock below--%>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock10" runat="server"
UniqueName="RadDock10" AutoPostBack="true">
<ContentTemplate>
dock 10
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockLayout>
The size of a dock is increased a bit each time it is dropped and the EnableAnimation="True". Video: https://www.screencast.com/t/LoUJbAb8c Workaround: Set EnableAnimation="False" Steps to reproduce: 1. Run the following code. 2. Swipe the first and second dock several times (Test 1 and Test 2) <telerik:RadDockZone ID="Zone1" runat="server" Height="500px" Orientation="Horizontal" Width="400px"> <telerik:RadDock RenderMode="Lightweight" runat="server" Height="110px" Width="140px" ID="RadDock1" Title="RadDock A" DefaultCommands="None" DockMode="Docked" EnableAnimation="True" EnableRoundedCorners="True" Skin="Silk"> <ContentTemplate> <div style="background-color: blue; width: 110px; color: white"> Test 1 </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" runat="server" Height="110px" Width="140px" ID="RadDock2" Title="RadDock B" DefaultCommands="None" DockMode="Docked" EnableAnimation="True" EnableRoundedCorners="True" Skin="Web20"> <ContentTemplate> <div style="background-color: red; width: 110px; color: white"> Test 2 </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" runat="server" Height="110px" Width="140px" ID="RadDock3" Title="RadDock C" DefaultCommands="None" DockMode="Docked" EnableAnimation="True" EnableRoundedCorners="True" Skin="Web20"> <ContentTemplate> <div style="background-color: green; width: 110px; color: white"> Original </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> Result: The width of the first two docks is different than the one which has not been dragged (Original) Expected: The width of all docks remains the same.
When a RadDock control is dragged to the bottom of a page, the page will start scrolling.