I have a modal that has a source ListBox and a selected ListBox with AllowTransfer="true". I also have AutoPostBackOnTransfer="true" because otherwise the selected items didn't persist. the problem I'm having is that when I transfer an item and there is a postback, the ListBox of selected items moves from the right side of the source to directly below it. I can't figure out why this is happening. See the attached screen shots.
Here is the modal and the button that opens it:
<asp:LinkButton ID="btnDeptDCVL" runat="server" Style="cursor: pointer; text-decoration: underline; padding-left: 10px" Text="Select" />
<ajaxtoolkit:ModalPopupExtender ID="mPopupDept" runat="server" PopupControlID="pnlDept"
TargetControlID="btnDeptDCVL" BackgroundCssClass="modalProgressGreyBackground"
DropShadow="false">
</ajaxtoolkit:ModalPopupExtender>
<asp:Panel ID="pnlDept" runat="server" Height="450px" Width="514px" Style="display: none; background-color: AntiqueWhite;">
<div style="padding: 20px">
Select Departments from the left. Double-click, drag and drop, or click the arrows to select.<br />
<telerik:RadAjaxPanel runat="server" ID="rap1">
<telerik:RadListBox ID="rlbDeptDCVL" runat="server" Width="250" Height="350" TransferMode="Copy"
AllowTransfer="true" AllowTransferOnDoubleClick="true" EnableDragAndDrop="true" AutoPostBackOnTransfer="true"
TransferToID="rlbSelectedDeptDCVL">
<ButtonSettings Position="Right" />
</telerik:RadListBox>
<telerik:RadListBox ID="rlbSelectedDeptDCVL" runat="server" Width="220" Height="350">
</telerik:RadListBox>
</telerik:RadAjaxPanel>
<p style="text-align: center;">
<asp:LinkButton ID="lnkOKDeptDCVL" runat="server" Text="OK" class="label" />
<asp:LinkButton ID="lnkCancelDeptDCVL" runat="server" Text="Cancel" class="label" />
</p>
</div>
</asp:Panel>
Here is the modal and the button that opens it:
<asp:LinkButton ID="btnDeptDCVL" runat="server" Style="cursor: pointer; text-decoration: underline; padding-left: 10px" Text="Select" />
<ajaxtoolkit:ModalPopupExtender ID="mPopupDept" runat="server" PopupControlID="pnlDept"
TargetControlID="btnDeptDCVL" BackgroundCssClass="modalProgressGreyBackground"
DropShadow="false">
</ajaxtoolkit:ModalPopupExtender>
<asp:Panel ID="pnlDept" runat="server" Height="450px" Width="514px" Style="display: none; background-color: AntiqueWhite;">
<div style="padding: 20px">
Select Departments from the left. Double-click, drag and drop, or click the arrows to select.<br />
<telerik:RadAjaxPanel runat="server" ID="rap1">
<telerik:RadListBox ID="rlbDeptDCVL" runat="server" Width="250" Height="350" TransferMode="Copy"
AllowTransfer="true" AllowTransferOnDoubleClick="true" EnableDragAndDrop="true" AutoPostBackOnTransfer="true"
TransferToID="rlbSelectedDeptDCVL">
<ButtonSettings Position="Right" />
</telerik:RadListBox>
<telerik:RadListBox ID="rlbSelectedDeptDCVL" runat="server" Width="220" Height="350">
</telerik:RadListBox>
</telerik:RadAjaxPanel>
<p style="text-align: center;">
<asp:LinkButton ID="lnkOKDeptDCVL" runat="server" Text="OK" class="label" />
<asp:LinkButton ID="lnkCancelDeptDCVL" runat="server" Text="Cancel" class="label" />
</p>
</div>
</asp:Panel>