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

You may also like...

8 Responses

  1. Augusto says:

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

  2. Augusto says:

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

  3. Roger Tello says:

    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#

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: