[ASP.NET] Plugin jQuery quickSearch: Filtrar tablas y listas (ejemplo con Gridview)

Búsqueda “rapida” en tablas HTML o listas filtrando “on-the-fly”. Unas de las preguntas en los foros/grupos fue: Como filtrar GridView al presionar una tecla?

Plugins de jQuery para esta tarea hay muchos, por ejemplo…

  1. uitablefilter http://plugins.jquery.com/project/uiTableFilter

    http://gregweber.info/projects/uitablefilter

    demo: http://gregweber.info/projects/demo/flavorzoom.html

  2. quickSearch

    http://plugins.jquery.com/project/quicksearch

    demo: http://lomalogue.com/jquery/quicksearch/

    Nuevo repositorio del plugin en GitHub: https://github.com/riklomas/quicksearch
  3. columnFilter

    http://plugins.jquery.com/project/ColumnFilters

    demo: http://www.tomcoote.co.uk/jQueryColumnFilters.aspx

El ejemplo es con el plugin numero 2, quickSearch que fue un pedido en los foros/grupos de ASP.NET

[Actualización 14/01/2012] Nuevo ejemplo para descargar (ir al final). Actualización del repositorio de quickSearch

Para comenzar: Tablas semánticas

Importante 1: Tablas semánticas

Hay que tener en cuenta que para estos trabajos con tablas las mismas deben tener un semántica en sus filas… que queremos decir con “semántica de filas”, poder diferenciar las filas del encabezado del resto de las filas del cuerpo (filas de información/datos) y las del pie

Mas info:


Importante 2: Gridview de ASP.NET 2.0/3.5 y su renderizacion por default

El gridview que viene con ASP.NET por default el renderizado de las filas no es «muy semántico» es decir no agrupa las filas en tipo de filas.

OPCION 1: Utilizar CSS Friendly Adapter

Para ello necesitamos utilizar un “condimento” que es el CSS Friendly Adapter, que ya hablamos por aquí.

En el ejemplo que se adjunta para descargar al final se encuentra configurado el componente.

Gridview “normal” 😉 Gridview renderizado con CSS Friendly Adapter
image

image

image

image

 

OPCION 2: Generar thead en el gridview sin CSS Friendly Adapter

Puedes utilizar este snipeet:

GridViewJedis.DataSource = JediHelper.Listado();
GridViewJedis.DataBind();

GridViewJedis.UseAccessibleHeader = true;
GridViewJedis.HeaderRow.TableSection = TableRowSection.TableHeader;

Y renderiza de esta menera

Gridview con la opcion 2 Gridview renderizado con CSS Friendly Adapter
coloca el encabezado agrupado en thead

image  

Aquí encierra a la tabla HTML con un DIV, y además coloca en cada fila estilos CSS para poder “personalizarlos”

image 

image

 

RECOMENDACION: utilizar CSS Friendly Adapter para ser mas fácil a nuestros diseñadores gráficos para web 😉  a la hora de “estetizar” el trabajo.

 

Volviendo al tema del filtrado de la tabla…

 

Armando el ejemplo

Hay que descargar el plugin de jQuery quickSearch y por supuesto la versión de jQuery que estemos trabajando (este plugin es soportado por el framework de jQuery 1.2.x o superior)

image

Luego tenemos que tener una tabla y input text de donde se dispara el plugin

En este ejemplo lo obtengo así:

  1.  
    1. Obtener el Id del lado del cliente del Textbox
    2. Idem del Gridview
    3. Desde el textbox disparo el plugin para el selector de todas las filas de la grilla (del cuerpo de la misma)
<script type="text/javascript"">
    $(document).ready(function() {
        var txtFiltro = '#'+'<%=txtFiltro.ClientID %>';
        var grillaJedis = '#'+'<%=GridViewJedis.ClientID %>';
        $(txtFiltro).quicksearch(grillaJedis + ' tbody tr');
    });
</script>

Mas info en la ayuda del plugin

Al final se encuentra el ejemplo para descargar.

 

Veamos el comportamiento…

 

Ejemplo 1: Gridview sin CSS Friendly Adapter

Podemos ver que si no tenemos control de las filas de datos.. el plugin tambien filtrar el contenido del encabezado

<script type="text/javascript"">
    $(document).ready(function() {
        var txtFiltro = '#'+'<%=txtFiltro.ClientID %>';
        var grillaJedis = '#'+'<%=GridviewJedis.ClientID %>';
        $(txtFiltro).quicksearch(grillaJedis + ' tbody tr');
    });
</script>

Vemos que el selector que aplicamos al plugin quickSearch es que lo realice en todas las filas (tr) dentro de cuerpo (tbody) de la tabla

NOTA: Aqui voy a aclarar que en el ejemplo para descargar al final esta pagina no tiene un gridview, sino una tabla html que es la copia textual del renderizado de un gridview. Esto es para que en el mismo ejemplo pueda colocar uno con y sin CSS Friendly Adapter.

Gridview “normal” 😉 Filtrando
 
image
 
Filtrando: Yoda

Como el encabezado no tiene la palabra yoda se filtra tambien ;(

 image

Filtro: no

aqui podemos ver que filtra el texto que contiene tambien

image

 

 

 

Ejemplo 2: Gridview con CSS Friendly Adapter (u opcion 2 para renderizar thead)

Si utilizamos CSS Friendly Adapter, y con el mismo código de inicialización del plugin para quickSearch

<script type="text/javascript"">
    $(document).ready(function() {
        var txtFiltro = '#'+'<%=txtFiltro.ClientID %>';
        var grillaJedis = '#'+'<%=GridViewJedis.ClientID %>';
        $(txtFiltro).quicksearch(grillaJedis + ' tbody tr');
    });
</script>

Al filtrar con un texto se mantiene el encabezado

 image

Esto es porque se actua por el selector:

$(txtFiltro).quicksearch(grillaJedis + ‘ tbody tr’);

sobre el las filas del cuerpo

image

 

Ejemplo para descargar

Si no puedes ver para descargar click aquí.

 

[Actualización 14/01/2012] Nuevo ejemplo para descargar

Se actualizo la version del plugins como mejoras (se actualizo el evento .bind a .on de jQuery) . Métodos como .search, .currentMatchedResults, .cache)

Actualización del repositorio de quickSearch en GitHub

Para descargar ejemplo click aquí: http://sdrv.ms/WXXcOH

 

 

Enlaces

[Tip] Dynamics CRM 4.0 Client con Outlook 2010

Hace un par de semanas instale la suite 2010 del Office aprovechando una reinstalación de mi notebook;  y por donde trabajo utilizamos Microsoft Dynamics CRM 4.0 y la conectividad-sincronización con Outlook es muy buena y la queríamos mantener en Outlook 2010

Actualmente todavía no tiene soporte para Outlook 2010, pero hay una pequeñas ayudas/tips que nos pueden allanar el camino para utilizarlo en la versión Beta de Outlook 2010 (con nuestro pleno consentimiento)

Hay dos opciones

  1. Reinstalar sobre Outlook 2007 que ya tenia instalado el Cliente del CRM 4.0
  2. Instalar Cliente del CRM 4.0 para Outlook sin el Outlook instalado o con Outlook 2010 instalado (valga al redundancia)

 

Soluciones de cortesía

OPCION 1: Instalar sobre Outlook 2007 con Cliente CRM 4.0 instalado

Aquí no hay que hacer mucho, el cliente ya esta instalado y lo va a tomar el Outlook 2010. Habría que configurarlo de nuevo al cliente con el Asistente de configuración

image

 

OPCION 2: Instalar CRM 4.0 para Outlook sin el Outlook instalado o con Outlook 2010 instalado (valga al redundancia)

Aquí tenemos el problema, cualquiera de las dos opciones nos aparece el mensaje:

“No hay instalada ninguna versión compatible de Microsoft Outlook. Asegúrese de que Outlook 2003 o Outlook 207 están instalados con el Service Pack y las actualizaciones mas recientes. Si va a actualizar el cliente y no tiene ninguna versión de Outlook compatible, pude perder datos”

Outlook2010-CRM4ClientForOutlook-001

Si tenemos el Office 2010 instalado no lo va a reconocer como valido, asi que tendremos que “saltear esta verificación”

Como saltear la verificacion:

  1. Registrar esto en el Registro de Windows

    [HKEY_CURRENT_USERSOFTWAREMicrosoftMSCRMClient]

    Key Type: DWord
    Key: IgnoreChecks
    Value: 1

  2. Instalar el Cliente para CRM 4.0
  3. Instalar Office 2010 (si no lo tienes ya instalado)
  4. Configurar el Cliente del CRM 4.0 para Outlook

NOTA: EL cliente de CRM 4.0 para Outlook solo sirve para Outlook de 32bits

 

 

Referencias

Enlaces