ItemTemplate y JQuery

Posted on Actualizado enn


Hola, bueno y comenzamos un nuevo año, lleno de energía, vamos con todo este año, nuevos post, y sobretodo a aprender muchisimo….

He visto que un gran problema al trabajar con el control GridView, se da cuando se define el template field de una columna como un textbox, y se desea restringir la entrada a solo números.

Aunque esto algunas veces nos de un poco de trabajo, si nos apoyamos en la libreria jquery nos será bastante fácil, y no solo podremos restringir la entrada de solo números, tambien podremos mejorar la presentación y la usabilidad para el usuario.

Entonces, vamos a tener 2 diferentes funcionalidades:

  1. Restringir la entrada a solo números.
  2. Cuando estemos trabajando en alguna fila, se cambiará el color de fondo del textbox.

Para lo primero, vamos a usar una libreria de jquery, jquery numeric que permite realizar dicha validación.

Al final la aplicación funcionará así:

Como no podemos saber exactamente cuantas filas vamos a tener en el grid, ni mucho menos los id de los controles, vamos a usar selectores de clase, en definitiva la definición de las columnas del grid nos debe quedar algo asi:

<Columns>
<asp:BoundField HeaderText=”Código” DataField=”Cod” />
<asp:BoundField HeaderText=”Descripción” DataField=”Des” />
<asp:TemplateField HeaderText=”Cantidad”>
<ItemTemplate>
<asp:TextBox ID=”txtCantidad” runat=”server” CssClass=”numeric” MaxLength=”10″></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Como se puede observar, la clase asociada al textbox se llama numeric, y será con el dicha clase que enlazaremos los eventos de validación.

Ahora nuestro código del lado del cliente:

$(function () {
$(“.numeric”).numeric();
$(“.numeric”).focus(function () { $(this).css(“background-color”, “#ECF8E0″); });
$(“.numeric”).blur(function () { $(this).css(“background-color”, “white”); });
});

En este caso, cuando escribimios .numeric, quiere decir que usamos un selector de clase, y que dicha clase sera la llamada numeric, asi todos los controles con dicha clase tendrán las funciones anteriores.

Y que hace cada línea:

  1. $(“.numeric”).numeric(); Permite solo el ingreso de caracteres numéricos.
  2. $(“.numeric”).focus(function () { $(this).css(“background-color”, “#ECF8E0″); }); Cuando el control tiene el foco el color de fondo es verde.
  3. $(“.numeric”).blur(function () { $(this).css(“background-color”, “white”); }); Cuando el control pierde el foco se cambia el color de fondo a blanco.

Y eso es todo, espero les ayude este corto, sencillo y fácil ejemplo.

Código del ejemplo !!

About these ads

10 comentarios en “ItemTemplate y JQuery

    Augusto escribió:
    01/04/2011 en 16:54

    Hola he descargado el proyecto pero me vota varios errores he corregido algunos pero el principal esque no me aparece la grilla , me sale este error

    Error 4 No se puede cargar el archivo o ensamblado ‘ItemTemplateGridView’ ni una de sus dependencias. Este ensamblado se creó con un tiempo de ejecución más reciente que el tiempo de ejecución cargado actualmente y no se puede cargar.

    Como lo puedo corregir????

      Julio Avellaneda respondido:
      01/04/2011 en 16:57

      hola, que version del visual studio estas usando? pq el proyecto fue creado con visual studio 2010.. quedo pendiente, mi email es julito_gtu@hotmail.com por si me agregas…

        Augusto escribió:
        01/05/2011 en 10:05

        Hola , utilizo el visual studio 2008, tu crees que podrias pasar tu ejemploa esta version o como puedo hacer para visualizarlo.
        Saludos.

        Julio Avellaneda respondido:
        01/06/2011 en 13:36

        hola, mira te mando el link con el ejemplo en 2008, espero te sirva, si no es asi avisame
        Ejemplo 2008 !

    Augusto escribió:
    01/08/2011 en 17:47

    Hola , ya lo baje , si me sirvió .Gracias.
    Saludos,

    Roger Tello escribió:
    12/20/2013 en 17:37

    GRacias, de plano no tienes idea de como me ayudaste, una semana buscando como hacer de un textbox un semaforo, mi dolor de cabeza de 3dias, solucionado con una sola linea de codigo, es oro molido ese ejemplo, pese a que trabajas en VB y to en C#

      Julio Avellaneda respondido:
      12/20/2013 en 18:04

      Gracias amigo, pero.yo también trabajó en c#, pero algunos ejemplos los tengo en Vb, aunque ahora solo los subo en C#, saludos

    William escribió:
    05/22/2014 en 09:01

    Hola Julio excelente post, tengo una duda este selector de clase, es como alguna clase propia de la librería jquery, jquery numeric verdad? existen algunas otras librerías jquery que manejen este tipo de clases? Gracias Feliz dia

      Julio Avellaneda respondido:
      05/28/2014 en 08:19

      Hola William, como tal el selector de clase es propio de jquery, ya el llamado al numeric si es gracias al plugin, la mayoría de los plugins en jquery funcionan igual, defines sobre que elementos vas a trabajar es decir el selector y luego llamas la función que ofrece el plugin.

      Saludos

Deja un comentario

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