lunes, 10 de marzo de 2008

mover elementos de un listBox



Varias veces eh visto algo como la imagen que esta a la derecha. esto por lo general lo hacia en javscript. ahora me propuse hacerlo a atraves de .NET sin nada de javascript.

Aqui dejo el codigo:
    Sub boton1_Click(sender As Object, e As EventArgs)
dim ElementosEliminar as Arraylist = new Arraylist
for each item as ListItem in List1.Items
If item.Selected Then
List2.items.Add(New ListItem(item.text,item.value))
ElementosEliminar.add(item)
End If
next
RemoveElements(List1,ElementosEliminar)
End Sub

Sub boton2_Click(sender As Object, e As EventArgs)
dim ElementosEliminar as Arraylist = new Arraylist
for each item as ListItem in List2.Items
If item.Selected Then
List1.items.Add(New ListItem(item.text,item.value))
ElementosEliminar.add(item)
End If
next
RemoveElements(List2,ElementosEliminar)
End Sub


private function RemoveElements( Byref ListBox as ListBox,byval Elements as Arraylist)
for each item as ListItem in Elements
listBox.items.remove(item)
next

Se realizo una funcion RemoveElements, para no tener problemas con los indices.


Este es el codigo en el aspx:



  <table>
<tbody>
<tr>
<td>
<asp:ListBox id="List1" runat="server" SelectionMode="Multiple" AutoPostBack="false">
<asp:ListItem Value="valorhola">hola</asp:ListItem>
<asp:ListItem Value="valorChao">chao</asp:ListItem>
<asp:ListItem>hola1</asp:ListItem>
<asp:ListItem>hola2</asp:ListItem>
<asp:ListItem>hola3</asp:ListItem>
</asp:ListBox>
</td>
<td>
<asp:button id="boton1" onclick="boton1_Click" runat="server" AutoPostBack="true" text=">>"></asp:button>
<br />
<asp:button id="boton2" onclick="boton2_Click" runat="server" AutoPostBack="true" text="<<"></asp:button>
</td>
<td>
<asp:ListBox id="List2" runat="server" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
</tbody>
</table>

14 comentarios:

  1. ...ahora me propuse hacerlo a atraves de .NET sin nada de javascript

    ¿Por qué?

    Si no entiendo mal, cada vez que el usuario mueva un elemento de una lista a la otra, se hará una petición al servidor. ¿O no?

    ResponderEliminar
  2. Si.

    Pero para que solo refresque una parte de la pantalla, o solo se envien algunos datos se usa un updatePanel de AjaxControlToolkit
    esto lo que hace es como si simulara Un Iframe(pero lo hace un AJAX).


    sin ir mas lejos cualquier cosa que tu hagas por ejemplo en un formulario, le das click a un boton, automaticamente va a servidor.

    .NEt usa bastante ancho de banda y realiza muchas peticiones http al servidor

    ResponderEliminar
  3. ¿Y la ventaja de hacer esto usando .NET en lugar de JavaScript es....?

    ResponderEliminar
  4. Ninguna.

    pero hay veces en que uno solo tiene que usar controles .NET

    por ejemplo
    <asp:listBox id"lis1">
    uno puede decir en el servidor list1.selectedItem.value(o algo asi)

    en cambio con
    <select id="List1" name="List1"
    ahi .net no nos deja hacer List.selectedItem , si no que tenemos que leerlo del request

    se entiende mas o menos?

    ResponderEliminar
  5. Esta bueno, pero necesito que pase solo con doble click y ahi watio...
    tienes el codigo en java..??

    ResponderEliminar
  6. La verdad es que nunca me plantie hacer eso.

    pero la verdad es que esto es mucho mejor hacerlo solo con javascript.

    http://www.velocityreviews.com/forums/t99715-double-click-on-listbox.html
    http://forums.asp.net/t/1021467.aspx

    ResponderEliminar
  7. encontre un codigo en javascript ahi va por si alguien lo necesita..

    el en page_load lo sgte:

    Li_Campos.Attributes("onDblClick") = "javascript:move('right');"
    Li_Orden.Attributes("onDblClick") = "javascript:move('left');"

    trasvasija.js
    function move(side)
    {
    var temp1 = new Array();
    var temp2 = new Array();
    var tempa = new Array();
    var tempb = new Array();
    var current1 = 0;
    var current2 = 0;
    var y=0;
    var attribute;

    //assign what select attribute treat as attribute1 and attribute2
    if (side == "right")
    {
    attribute1 = document.form1.Li_Campos;
    attribute2 = document.form1.Li_Orden;
    }
    else
    {
    attribute1 = document.form1.Li_Orden;
    attribute2 = document.form1.Li_Campos
    }

    //fill an array with old values
    for (var i = 0; i < attribute2.length; i++)
    {
    y=current1++
    temp1[y] = attribute2.options[i].value;
    tempa[y] = attribute2.options[i].text;
    }

    //assign new values to arrays
    for (var i = 0; i < attribute1.length; i++)
    {
    if ( attribute1.options[i].selected )
    {
    y=current1++
    temp1[y] = attribute1.options[i].value;
    tempa[y] = attribute1.options[i].text;
    }
    else
    {
    y=current2++
    temp2[y] = attribute1.options[i].value;
    tempb[y] = attribute1.options[i].text;
    }
    }

    //generating new options
    for (var i = 0; i < temp1.length; i++)
    {
    attribute2.options[i] = new Option();
    attribute2.options[i].value = temp1[i];
    attribute2.options[i].text = tempa[i];
    }

    //generating new options
    ClearList(attribute1,attribute1);
    if (temp2.length>0)
    {
    for (var i = 0; i < temp2.length; i++)
    {
    attribute1.options[i] = new Option();
    attribute1.options[i].value = temp2[i];
    attribute1.options[i].text = tempb[i];
    }
    }
    }

    function ClearList(OptionList, TitleName)
    {
    OptionList.length = 0;
    }


    atte.
    d@m

    ResponderEliminar
  8. holaaa soy eric matute y me gustaria quye le dieras una mejor explicacion en lo que haces y si podes pasalo a java y mandamelo a mi correo velas87quez@yahoo.com.mx

    te lo agradeseria!!!

    ResponderEliminar
  9. Hola Eric:
    David aquí mismo hizo un comentario donde puso como se puede hacer esto en javascript.

    David:

    se me había olvidado muchas Gracias por el comentario anterior.

    --
    Atte.
    Víctor Hugo SAaavedra.

    ResponderEliminar
  10. HOLA TENGO UN PROBLEMA LO Q PASA ES Q TENGO UNA FUNCION EN JAVA Q ME PERMITE PASAR UN ITEM DE UN LIST A OTRO Y TAMBIEN ME PERMITE MOVERLO DE ARRIBA HACIA ABAJO

    PERO ESTOY MANEJANDO . NET PARA GUARDAR ESOS DATOS EN UNA BASE....

    PERO AL MOMENTO DE GUARDARLOS NO ME ESTA TOMANDO LOS DATOS Q TENGO EN EL LIST............

    Q PUEDO HACER?????????????????

    ResponderEliminar
  11. si así, te recomiendo hacerlo todo con .net y código de servidor, como esta en este articulo.

    de esa forma después simplemente recorres las listas y las mandas a la base de datos.

    --
    Atte.
    Víctor Hugo Saavedra

    ResponderEliminar
  12. Muchisimas gracias por el codigo. Realmente me saco de apuros.

    ResponderEliminar
  13. alguien podria ayudarme con pasar datos de un grid a otro en asp y postgres :)
    si alguien me ayuda aki ta mic correo
    warboy_28@hotmail.com

    ResponderEliminar
  14. HOLA PROBE EL PRIMER CODIGO ME IBA BIEN PERO LUEGO CAMBIE TODO ESE CODIGO A UNA NUEVA PAGINA Y AHI NO FUNCIONA, SABEN PORQUE.

    GRACIAS DE ANTEMANO

    ResponderEliminar