.NET For Your Information

Un blog más sobre tecnología .NET

Como arrastrar o mover (drag and drop) filas de un GridView

with 6 comments


Este post tiene como objetivo realizar drag and drop (arrastrar o mover) las filas de un GridView. La utilidad de esta funcionalidad varia de proyecto en proyecto. Por ejemplo, en mi caso la utilice para determinar una lista basada en prioridades, donde la fila que estaba al tope del GridView era la que tenia mayor prioridad.

Para esto vamos a utilizar los siguientes componentes:

  • 1 hoja de estilos .css
  • script personalizado .js
  • 1 pagina .aspx
  • jQuery 1.4.1 (o cualquier version mas reciente)
  • tableDnD (jQuery plugin para arrastrar las filas del GridView)

Basicamente, el la hoja de estilo (css) la utilizaremos con el fin de dar un color distinto a la fila que esta siendo arrastrada. Este es el codigo en css:

El script personalizado (js) lo utilizaremos para aplicar el plugin tableDnD a nuestro GridView:

Por otro lado, la pagina (aspx) hara referencia a los archivos mencionados anteriormente, y tendra el GridView al cual queremos aplicar el plugin para arrastrar las filas, de la siguiente manera:

Por ultimo, este es el codebehind en C#, para darle datos a nuestro GridView:

Ejecutamos nuestro proyecto y el resultado sera un GridView cuyas filas podran ser arrastradas (drag and drop):

Post relacionado: Como obtener nuevo orden de filas de GridView luego de moverlas.

Anuncios

Written by Alejandro Afonso Spinola

4 octubre 2012 a 5:15 AM

6 comentarios

Subscribe to comments with RSS.

  1. […] un comentario » En el post anterior vimos como arrastrar o mover filas de un GridView. Sin embargo, en ese post todos los cambios ocurren en el lado del cliente (javascript, html), y el […]

    • Alejandro, disculpa la molestia, tienes el ejemplo en código para enviarme acerca del Drag and Drop en Gridview, ya que no me funciona.
      Gracias!
      Saludos.

      jorge

      10 mayo 2013 at 2:21 PM

  2. Por favor, utilize tu codigo pero todavia no logro mover las filas del gridview, estoy utilizando masterpage pero creo que eso no debe de ocaciones ningun problema, por favor ayudame, ademas el gridview esta dentro de un apdatePanel

    Ricardo

    22 mayo 2013 at 9:57 AM

    • Ok. Sabes mas o menos en que esta fallando? Yo he utilizado esto con MasterPage y UpdatePanels y funciona sin problemas asi que esa no debe ser la causa directa del problema.

      Alejandro Afonso Spinola

      22 mayo 2013 at 10:12 AM

    • Ojo, revisa cual es el ID del GridView ya que este se modifica cuando se usan MasterPages. Ese ID que se genera en el cliente es el identificador que debes poner en la funcion de javascript

      Alejandro Afonso Spinola

      22 mayo 2013 at 10:15 AM

      • Alejandro estupendo, ya salio era por el nombre que me generaba el masterpage, ahora mira yo en vez de poner el id del gridview que es “GridView1” yo he puesto el nombre que se genera el cual es “ContentPlaceHolder1_GridView1” y sale perfecto, pero quiero poner algo generico porque quizas se cambia el nombre y tendria q cambiar en la fuente, creo que es con el clientID o algo asi como lo pondria en tu lina de JS que es: “$(“#ContentPlaceHolder1_GridView1″).tableDnD({”

        Gracias

        Ricardo

        22 mayo 2013 at 10:24 AM


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: