RadListBox Drag And Drop Index error

2 posts, 0 answers
  1. Renan
    Renan avatar
    1 posts
    Member since:
    Nov 2011

    Posted 08 Feb 2012 Link to this post

    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 ^^
  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 09 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top