[Solved] RadDock panels rearranged after postback

[Keith]

I have several usercontrols that utilize many RadDock elements. These usercontrols are loaded as content for multiview pages.
This is an excerpt from my default.aspx

<telerik:RadMultiPage ID="radShifts" runat="server" BorderColor="Black" BorderStyle="Inset" BorderWidth="2px" SelectedIndex="0" Width="100%">
                <telerik:RadPageView ID="pvActiveShifts" runat="server">
                    <uc2:activeshifts runat="server" />
                </telerik:RadPageView>
                <telerik:RadPageView ID="pvActivePending" runat="server">
                    <uc2:activeshiftspending runat="server" />
                </telerik:RadPageView>
                <telerik:RadPageView ID="pvCancelledPending" runat="server">
                    <uc2:cancelledshiftspending ID="cancelledshiftspending" runat="server" />
                </telerik:RadPageView>
                <telerik:RadPageView ID="pvCancelledArchived" runat="server">
                    <uc2:cancelledshiftsarchived ID="cancelledshiftsarchived" runat="server" />
                </telerik:RadPageView>
</telerik:RadMultiPage>

This is a sample usercontrol for uc2:activeshifts (I removed all of the controls in the content template to save space). This exact control can be considered identical for the remaining usercontrols.

<telerik:RadDockLayout ID="dockLayout1" runat="server" >
    <telerik:RadDockZone ID="zone1" runat="server" Orientation="Vertical" BorderStyle="None" Skin="Black">
        <telerik:RadDock ID="dockActiveShiftsFilter" runat="server" Skin="Black" Width="100%" DefaultCommands="None" Title="Filter" DockMode="Docked">
            <ContentTemplate>
            </ContentTemplate>
        </telerik:RadDock>
        <telerik:RadDock ID="dockActiveShiftsFilled" runat="server" Skin="Black"
            Width="100%" DefaultCommands="ExpandCollapse" Title="Shifts Filled"
            DockMode="Docked">
            <ContentTemplate>
            </ContentTemplate>
        </telerik:RadDock>
        <telerik:RadDock ID="dockActiveShiftsAvailable" runat="server" Skin="Black" Width="100%"
            DefaultCommands="ExpandCollapse" Title="Shifts Available"
            DockMode="Docked">
            <ContentTemplate>
            </ContentTemplate>
        </telerik:RadDock>
    </telerik:RadDockZone>
</telerik:RadDockLayout>

On each usercontrol, I have a button that refreshes the current multipageview, when I select the button to refresh the content, the other pageview docks are rearranged in order on the page.

Each usercontrol uses a different dockzone and docklayout, so the controls shouldn't be affecting them. Is there a way to prevent the other docks from rearranging on postback?

[Keith]

Further checking indicates that the index is consistent server-side, although the display client-side is not.

I checked the index of each RadDock server-side at multiple locations. When the page loads on postback, pre-render, when the main page loads on postback and when the control is unloaded server-side. the index remains consistent.

Additionally, I have determined that the rendering of the RadDock controls is in reverse order client-side, After adding six RadDock controls to the RadDockZone, I tried once again. The result is that the RadDock controls are always displayed in reverse order of their index. If I move index 0 to be the last control, its index indicates that it is index 5 (six controls). If I switch tabs in my multipageview, and refresh that pageview, the index of the controls return as they should, however, index 5 is now shown in position 0, index 4 is shown in position 1, etc. Again, in reverse order. The interesting thing is that if I refresh that specific pageview, the controls return to their prescribed order as they should be.

This would appear to be a client-side bug with the embedded scripting when the controls are not displayed.

<edit>

Further testing indicates that RadDock controls are initialized 0 to ~ when the page is first rendered, however, on postback, the controls are initialized from ~ to 0.

I suspect that because the container is hidden the controls are not laid out according to their index, instead being laid out according to the order in which they are initialized.

[Slav]

Hello Keith,

I tried to recreate your problem via the information you have provided, but to no avail. Please compare the attached test sample with you actual project and check if there are differences in the setup.

Note that the purpose of RadDockLayout is to persist the state of all docks on a page. It is recommended to have only one instance of this control per page, which wraps all docks on that page. This is why I removed the RadDockLayout from the user controls in my sample and wrapped the RadTabStrip and the RadMultiPage in a new RadDockLayout. I would suggest that you do the same in your project.

The problem you described appears to be similar to this one, however you have not mentioned any AJAX requests in your scenario. Please ensure if this is the case and if there is indeed Ajaxification of the tab strip and multi page, replace the RadAjaxPanel or RadAjaxManager with an UpdatePanel.

In case you are still having difficulties after examining the information above, please let me know how to modify the attached sample in order to reproduce the problem. This will allow me to inspect it locally and provide a concrete solution.

Regards,
Slav
the Telerik team

[Keith]

Yes, I am using ajax to update the individual pageview controls, although, I don't like it. I originally wanted to only update a single control on the pageview, however, after many failed attempts to get the project working as expected, I had to force the entire pageview to update. It is the pageview controls that are not visible that get reordered in reverse order.

After removing the ajax control, the RadDock panels are not rearranged. The initial problem is now resolved.

Next step ... updating only specified controls on the current pageview.