« Volver
in JQuery read.

ItemTemplate y JQuery.

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:









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 !!

comments powered by Disqus