GridView, JQuery y un menú contextual

Posted on Actualizado enn


Hola a todos, bueno luego de algún tiempo sin subir nada, y se que entienden cuando se esta termiando un proyecto, hoy quiero mostrarles como podemos hacer un menú contextual con jquery y un gridview.

Pero por que hacer un menú contextual?… muchas veces nos cansamos de tener 2,3 o mas botones en cada fila del grid.. y que mejor q un menú contextual apra tener todas las opciones en el mismo sitio..!!

Como primero quiero mostrarles como va a quedar nuestro menú.

Bueno ya sabemos como debe quedar, ahora manos a la obra.

Lo primero que necesitamos son dos librerias de jquery (en el ejemplo adjunto las encuentran), las agregamos a nuestro proyecto y posteriormente las referenciamos en nuestra página… es decir, no debe quedar algo asi:


<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>

y alli lo q estamos haciendo es referenciando los archivos de script a la página.

Ahora, el menú contextual no es nada más que una simple lista, la cual definimos de la siguiente manera:


<ul id="myMenu" class="contextMenu">

<li class="Opcion"><a href="#Opcion1">Opción 1</a></li>

<li class="Opcion"><a href="#Opcion2">Opción 2</a></li>

<li class="Opcion"><a href="#Opcion3">Opción 3</a></li>

</ul>

en donde definimos tantos items de lista como opciones de menú necesitemos.

Luego de tener creado el “menú”, en la definición de las columnas del gridview, se debe definir una columna la cual tendrña una imagen o link o boton (lo que deseen) para que ar dar clic derecho podamos visualizar el menú), en resumen la columna quedaria:


<asp:TemplateField>

<ItemTemplate>

<div id="myDiv">

<img src="~/images/options.png" id="img" runat="server" title="Ver opciones [click derecho]" />

</div>

</ItemTemplate>

</asp:TemplateField>

Lo importante aqui es q el div que se define será el encargado de mostrar el menú contextual, por eso antes decia que se puede usar una imagen, un boton, etc, y dentro del div definimos el control, en mi caso usé una imagen de html.

Y en este punto ya hemos terminado con el diseño del gridview y del menú contextual, ahora lo que debemos hacer es con jquery crear de verdad el menú…nuestro código jquery quedaría así:


<script type="text/javascript">

    $(function() {

       $("#GridViewDatos div").click(function() {

            $("#GridViewDatos div").enableContextMenu();

    });

    $(document).ready(function() {

       $("#GridViewDatos div").contextMenu({

          menu: 'myMenu'

          }, function(action, el, pos) {

             switch (action) {

               case "Opcion1":

                  {

                   alert('Ha seleccionado la opción 1');

                   break;

                  }

               case "Opcion2":

                  {

                   alert('Ha seleccionado la opción 2');

                   break;

                  }

               case "Opcion3":

                  {

                   alert('Ha seleccionado la opción 3');

                   break;

                  }

               }

           });

       });

    });

    </script>

Bueno ahora vamos a comentar…

La primera función que tenemos, lo que hace activar el menú contextual en pocas palabras, y la segunda función la cual es la más compleja, y lo que hace es al div que encuentra dentro del gridview le asigna el menú que creamos, es decir la lista que se definio, por eso el id de la lista es el mismo valor del atributo menu. Luego viene una función que tiene tres argumentos, los cuales sirven para capturar la acción o el item seleccionado del menú contextual, una manera fácil es hacer un switch al action y definir diferentes case para cada opción, los case son definidos con base al valor href de la etiqueta “a” de la lista creada, por eso en el ejemplo se ha definido 3 case (opcion1,opcion2 y opcion3).. luego se muestra un mensaje informando la opción elegida, ya depende de cada necesidad definir la funcionaldiad deseada…

Buenos espero que les sea de ayuda el ejemplo… como siemore cualquier comentario es bien recibido…

Descarga del código fuente !!

En el siguiente post el cual espero subir la otra semana, vamos a realizar un autocomplete contra una base de datos sql con jquery…

7 comentarios sobre “GridView, JQuery y un menú contextual

    Lobato escribió:
    01/31/2013 en 17:22

    Hola, es un aporte muy muy útil, tengo una duda adicional… Si tengo que efectuar una rutina que se encuentra del lado del servidor en la misma webform.. Cómo le hago ahora para hacer ejecutar dicha rutina??

    Disculpa mi ignoracia de antemano.

    SALU2

      Julio Avellaneda respondido:
      01/31/2013 en 22:30

      Hola, gracias amigo, lo que podrías hacer en ese caso es llamar un webservice o un pagemethod, así todo sería asíncrono, cuéntame cualquier duda.

      Saludosl

    Cristian escribió:
    03/21/2013 en 12:22

    Hola, tengo que crear un context menu y pasarle un id como parametro para luego interactuar con ese objeto como seria entonces, ya que quiero por ejemplo borrar el contenido de una celda de una tabla

    Cristian escribió:
    01/30/2014 en 21:25

    Sigues hechandole una mirada Julio Avellaneda, ya son como 4 meses y no respondes…

      Julio Avellaneda respondido:
      02/03/2014 en 12:11

      Cristian, coloca un campo oculto y lo.lees como los demás, saludos

    jorge escribió:
    04/24/2014 en 06:04

    Hola, estoy buscando como hacer las consultas de bases, que busque a medida que escribo y remarque el texto en el gridview, en asp.net y vb.net.
    Tenes algún ejemplo?
    Desde ya muchas gracias.-

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