This is a migrated thread and some comments may be shown as answers.

ListBox controls stack after postback

2 Answers 65 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Kim
Top achievements
Rank 1
Kim asked on 30 Jul 2014, 06:51 PM
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" />
                                                        &nbsp;&nbsp;
                                                        <asp:LinkButton ID="lnkCancelDeptDCVL" runat="server" Text="Cancel" class="label" />
                                                    </p>
                                                </div>
                                            </asp:Panel>

2 Answers, 1 is accepted

Sort by
0
Kim
Top achievements
Rank 1
answered on 30 Jul 2014, 07:11 PM
Looks like a display inline style disappears for no reason. It's a generated div.

This is what's rendered before any items are added:
1.<div id="ctl00_ctl00_rlbSelectedDeptDCVLPanel" style="display: inline;">
2.            <div id="ctl00_rlbSelectedDeptDCVL" class="RadListBox RadListBox_Default RadListBoxScrollable" style="height:100px;width:220px;">
3.                <div class="rlbGroup rlbGroupRight">
4. 
5.                </div><input id="ctl00_rlbSelectedDeptDCVL_ClientState" name="ctl00_rlbSelectedDeptDCVL_ClientState" type="hidden" autocomplete="off" value="{"isEnabled":true,"logEntries":[],"selectedIndices":[],"checkedIndices":[],"scrollPosition":0}">
6.            </div>
7.        </div>

This is what's rendered after adding an item:
01.<div id="ctl00_ctl00_rlbSelectedDeptDCVLPanel">
02.        <div id="ctl00_rlbSelectedDeptDCVL" class="RadListBox RadListBox_Default RadListBoxScrollable" style="height:100px;width:220px;">
03.            <div class="rlbGroup rlbGroupRight">
04.                <ul class="rlbList">
05.                    <li id="ctl00_rlbSelectedDeptDCVL_i0" class="rlbItem"><span class="rlbText">18 BED PILLOWS    </span></li>
06.                </ul>
07.            </div><input id="ctl00_rlbSelectedDeptDCVL_ClientState" name="ctl00_rlbSelectedDeptDCVL_ClientState" type="hidden" autocomplete="off" value="{"isEnabled":true,"logEntries":[],"selectedIndices":[],"checkedIndices":[],"scrollPosition":0}">
08.        </div>
09.    </div>
0
Hristo Valyavicharski
Telerik team
answered on 04 Aug 2014, 04:46 PM
Hi Kim,

This looks like a stying issue. Can you attach a sample project, so we can inspected the css code?

Thanks.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ListBox
Asked by
Kim
Top achievements
Rank 1
Answers by
Kim
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or