En el post pasado (miralo aca) vimos como podemos añadir la funcionalidad de ordenamiento a un gridview utiizando jQuery, mencionamos el uso del los css friendly controls adapters para mejorar el renderizado del gridpoder hacer uso del plugin de jQuery.

En este artículo vamos a revisar como podemos añadir un textbox el cual al ir ingresado caracteres nos ayudará a ir filtrando nuestro grid, similarmente como el ejemplo del post anterior haremos uso de los css friendly controls adapters para mejorar el renderizado del grid.

Para este ejemplo vamos a utilizar el plugin de jQuery quickSearch, en este caso utilizaremos el mismo ejemplo del post anterior solo que le añadiremos esta nueva funcionalidad.

Primero añadimos una referencia al plugin de jQuery quickSearch, luego añadimos un textbox donde al ir escribiendo se realizará el friltro del grid,finalamente el código jQuery:

$(function () { $("#<% = grvDatos.ClientID %> table").tablesorter(); $("#<% = txtBuscar.ClientID %>").quicksearch("#<% = grvDatos.ClientID %> table tbody tr"); })

Lo importante aca es la 3ra línea de código esdonde vamos ahacer uso del plugin, primeroel selector que desencadanará el evento es el campo de texto, luego le decimos que seleccione el gridview, y le añadimos algunos filtros los cuales son table para que seleccione la tabla (como vimos en el post anteriores la tabla se crea dentro de un div), luego que filtre el cuerpo de la tabla tbody y finalamente que seleccione las filas tr.

Como siempre les dejo el ejemplo en VB y en C#.

Ejemplo en VB !
Ejemplo en C# !