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

About these ads