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:

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