RadListBox Drag And Drop Index error

[Renan]

Hi everyone.

Actually i run into a problem where i have 2 radlistbox, they are inside an updatepanel wich the update is conditional. The thing is that i dont want them to postback, so i just took the autopostback off.. it works great, its really fast, but if i got the page a postback it throws an index error. this error just occur if i left 0 itens at the first radlistbox, if exists one it didnt occur.

here goes the code. 

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <plk:Formulario ID="frmDistribuidor" runat="server" Titulo="Distribuidores" Visible="false">
                <asp:Panel ID="pnlDistribuidorUnico" runat="server" Visible="false">
                    <div>
                        <asp:Label ID="label4" runat="server" Text="Distribuidor"></asp:Label>
                        <span style="padding-left: 73px;">
                            <asp:DropDownList ID="ddlDistribuidor" Width="280px" runat="server">
                            </asp:DropDownList>
                        </span>
                    </div>
                </asp:Panel>
                <asp:Panel ID="pnlDistribuidorLooping" runat="server" Visible="false">
                    <div style="float: left; padding-left: 20px;">
                        <div class="esq larg300">
                            <div style="background-color: #3C49A5; width: 300px; height: 20px;">
                                <div style="padding-top: 4px; text-align: center; color: White; height: 20px;">
                                    Distribuidores de Preferência
                                </div>
                            </div>
                            <telerik:RadListBox ID="RadListBox1" runat="server" Width="300px" Height="150px"
                                SelectionMode="Multiple" AllowTransfer="True" TransferToID="RadListBox2"
                                AllowReorder="True" EnableDragAndDrop="True" PersistClientChanges="true" OnClientTransferred="onClientTransferredHandler" AutoPostBackOnReorder="true" CssClass="RadListBox">
                                <ButtonSettings ShowTransferAll="false" ShowTransfer="false" VerticalAlign="Middle"
                                    ShowReorder="false" AreaWidth="50px" />
                            </telerik:RadListBox>
                        </div>
                        <div class="esq alt150" style="text-align: center; padding-left: 10px">
                            <br />
                            <br />
                            <br />
                            <asp:ImageButton ID="btnParaDireita" ImageUrl="~/Imagens/btn-Rigth.png" runat="server"
                                ToolTip="Adicionar" OnClientClick="return transferRight()" />
                            <br />
                            <asp:ImageButton ID="btnParaEsquerda" ImageUrl="~/Imagens/btn-Left.png" runat="server"
                                ToolTip="Remover" OnClientClick="return transferLeft()" />
                            <br />
                            <br />
                            <img id="btnAjudaListBox" runat="server" alt="Ajuda" src="../../Imagens/btn-ajudar.png" />
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" AnimationDuration="0" AutoCloseDelay="0"
                                Position="MiddleRight" RelativeTo="Element" ShowCallout="False" ShowDelay="0"
                                ShowEvent="OnClick" Skin="Hay" TargetControlID="btnAjudaListBox" Text="Para inclusão de um distribuidor no processo de looping, selecione-o na <br /> lista de Distribuidores de Preferência e arraste para a lista de Distribuidores <br /> Selecionados, ou pressione o botão adicionar.">
                            </telerik:RadToolTip>
                        </div>
                        <div class="esq larg300" style="padding-left: 10px">
                            <div style="background-color: #3C49A5; width: 300px; height: 20px;">
                                <div style="padding-top: 4px; text-align: center; color: White; height: 20px;">
                                    Distribuidores Selecionados
                                </div>
                            </div>
                            <telerik:RadListBox ID="RadListBox2" runat="server" Width="300px" Height="150px"
                                SelectionMode="Multiple" AllowReorder="true"
                                EnableDragAndDrop="true" PersistClientChanges="true" AutoPostBackOnReorder="true" CssClass="RadListBox">
                                <ButtonSettings ShowTransferAll="false" ShowReorder="false" VerticalAlign="Middle"
                                    AreaWidth="50px" />
                            </telerik:RadListBox>
                        </div>
                        <div class="esq alt150" style="text-align: center; padding-left: 10px;">
                            <div class="marginTop47">
                                <asp:ImageButton ID="btnParaCima" ImageUrl="~/Imagens/btn-Up.png" runat="server"
                                    OnClientClick="return reorderUp()" ToolTip="Mover para Cima" />
                            </div>
                            <div>
                                <asp:ImageButton ID="btnParaBaixo" ImageUrl="~/Imagens/btn-Down.png" runat="server"
                                    OnClientClick="return reorderDown()" ToolTip="Mover para Baixo" />
                            </div>
                        </div>
                    </div>
                </asp:Panel>
                <div style="clear: both;">
                </div>
                <asp:Panel ID="pnlDistribuidorVisualizacao" runat="server" Visible="false">
                    <div class="esq larg300" style="padding-left: 200px">
                        <div style="background-color: #3C49A5; width: 300px; height: 20px;">
                            <div style="padding-top: 4px; text-align: center; color: White; height: 20px;">
                                Distribuidores Selecionados
                            </div>
                        </div>
                        <telerik:RadListBox ID="RadListBoxVisualizacao" runat="server" Width="300px" SelectionMode="Single"
                            AllowReorder="false" AutoPostBackOnReorder="true" EnableDragAndDrop="false" CssClass="RadListBox">
                            <ButtonSettings ShowTransferAll="false" ShowReorder="false" ShowDelete="false" ShowTransfer="false"
                                VerticalAlign="Middle" AreaWidth="50px" />
                        </telerik:RadListBox>
                    </div>
                </asp:Panel>
                <div style="clear: both;">
                </div>
                <br />
                <div>
                    <div align="center">
                        <asp:Label ID="label3" runat="server" Text="Forma de Pagamento" Font-Underline="true"
                            Font-Bold="true"></asp:Label>
                    </div>
                    <div align="center" class="alinhaDivPrazoPagamento">
                        <asp:RadioButtonList ID="rblPrazo" runat="server" CssClass="Formulario" Height="12px"
                            RepeatDirection="Horizontal" Width="184px" BorderStyle="None" CausesValidation="True"
                            Visible="true">
                            <asp:ListItem Value="1">À vista</asp:ListItem>
                            <asp:ListItem Value="2">A prazo</asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                </div>
            </plk:Formulario>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnVisualizar" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="btnCorrigir" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

and here its the javascript for the buttons, well, the buttons to the left and right has the same problem, so i took out the return false, making a postback doing the work correctly... well.. unfortunely it blinks the page.... but its fast...

function transferRight() {
                var listBox = $find("<%= RadListBox1.ClientID %>");

                var selectedItem = listBox.get_selectedItems();
                if (selectedItem == null) {
                    alert("É necessário selecionar um item primeiro.");
                    return false;
                }

                listBox.transferToDestination(selectedItem);
            }

            function transferLeft() {
                var listBox = $find("<%= RadListBox1.ClientID %>");
                var listBox2 = listBox.get_transferTo();
                var selectedItem = listBox2.get_selectedItems();
                if (selectedItem == null) {
                    alert("É necessário selecionar um item primeiro.");
                    return false;
                }

                listBox.transferFromDestination(selectedItem);
            }

hope u guys help me....  thx in advance ^^

[Bozhidar]

Hi Renan,

Please review the following forum topic:
http://www.telerik.com/community/forums/aspnet-ajax/listbox/index-was-out-of-range-must-be-non-negative-and-less-than-the-size-of-the-collection-parameter-name-index.aspx 
 
Kind regards,
Bozhidar
the Telerik team