Filtrar en Cabeceras del GridView con Totales en el Pie y Filas de Color
El post que viene es muy interesante ya que es un 3 en 1. Se trata de una GridView en ASP.NET Web Forms que permita filtrar mediante controles en la cabecera, mostrar el número de registros encontrados en el pie y mostrar de color las palabras buscadas en los filtros en los registros encontrados.
Requerimiento
Se necesita crear una consulta web con los siguientes requerimientos:
- La consulta debe ser desconectada y no ir a a cada momento al servidor de datos.
- Los filtros deben ser por todos los campos mostrados y deben ocupar poco espacio.
- Se debe ver de color rojo la palabra buscada en cada columna donde se ingrese un criterio de búsqueda.
- Se debe mostrar la cantidad de registros encontrados en la parte inferior.
Solución
- Usaremos el control GridView y personalizaremos la cabecera, el pie y los registros usando plantilla de datos en Web Forms (Data Template).
- Además usaremos el Enlace de Datos para conservar los valores de los campos buscados en las cabeceras ya que se pierden al ir al servidor web.
- Usaremos funciones de lado del servidor para formatear la cabecera a mostrar asi como los valores de los registros que coincidan con la palabra buscada. En esta última parte usaremos Reflection para obtener el valor de cada propiedad del objeto cabecera.
Nota: Muchos desarrolladores usan controles de terceros para cubrir este requerimiento porque no conocen bien el tema de plantillas de datos, código incrustado del servidor y por supuesto Reflection.
Crear el Procedimiento Almacenado en la Base de Datos de SQL Server
Create Procedure uspProductsListar
As
Select ProductID,ProductName,SupplierID,CategoryID,UnitPrice,UnitsInStock
From Products
Crear la Aplicación Web en ASP .NET Web Form
Crear un "Nuevo Sitio web vacío de ASP .NET" en C# llamado "GridView_FiltroCabecera_RptaColor".
Para simplificar el Demo no he creado librerías de clases y las clases las he incluido dentro de la aplicación Web.
Crear la Clase Entidad del Negocio
Crear la clase beProducto escribiendo el siguiente código:
using System;
namespace GridView_FiltroCabecera_RptaColor
{
public class beProducto
{
public beProducto()
{
IdProducto = -1;
IdProveedor = -1;
IdCategoria = -1;
PrecioUnitario = -1;
Stock = -1;
}
public int IdProducto { get; set; }
public string Nombre { get; set; }
public int IdProveedor { get; set; }
public int IdCategoria { get; set; }
public decimal PrecioUnitario { get; set; }
public short Stock { get; set; }
}
}
Nota: Se ha creado un constructor para iniciar las propiedades numéricas en -1 y asi poder permitir la búsqueda del cero (0) en los filtros.
Crear la Clase de Acceso a Datos
Crear la clase daProducto escribiendo el siguiente código:
using System;
using System.Data; //CommadType
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
using System.Collections.Generic; //List
namespace GridView_Paginado_Checks
{
public class daProducto
{
public List<beProducto> listar(SqlConnection con)
{
List<beProducto> lbeProducto = null;
SqlCommand cmd = new SqlCommand("uspProductsListar", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataReader drd = cmd.ExecuteReader(CommandBehavior.SingleResult);
if (drd != null)
{
lbeProducto = new List<beProducto>();
int posIdProducto = drd.GetOrdinal("ProductID");
int posNombre = drd.GetOrdinal("ProductName");
int posIdProveedor = drd.GetOrdinal("SupplierID");
int posIdCategoria = drd.GetOrdinal("CategoryID");
int posPrecioUnitario = drd.GetOrdinal("UnitPrice");
int posStock = drd.GetOrdinal("UnitsInStock");
beProducto obeProducto;
while (drd.Read())
{
obeProducto = new beProducto();
obeProducto.IdProducto = drd.GetInt32(posIdProducto);
obeProducto.Nombre = drd.GetString(posNombre);
obeProducto.IdProveedor = drd.GetInt32(posIdProveedor);
obeProducto.IdCategoria = drd.GetInt32(posIdCategoria);
obeProducto.PrecioUnitario = drd.GetDecimal(posPrecioUnitario);
obeProducto.Stock = drd.GetInt16(posStock);
lbeProducto.Add(obeProducto);
}
drd.Close();
}
return (lbeProducto);
}
}
}
Nota: Tiene que haberse creado el Procedimiento Almacenado "uspProductsListar" en la BD Northwind.
Crear la Clase de Reglas del Negocio
Crear la clase brProducto escribiendo el siguiente código:
using System;
using System.Collections.Generic; //List
using System.Data.SqlClient; //SqlConnection
using System.Configuration; //ConfigurationManager
namespace GridView_Paginado_Checks
{
public class brProducto
{
public List<beProducto> listar()
{
List<beProducto> lbeProducto = null;
string conexion = ConfigurationManager.ConnectionStrings["conNW"].ConnectionString;
using (SqlConnection con = new SqlConnection(conexion))
{
try
{
con.Open();
daProducto odaProducto = new daProducto();
lbeProducto = odaProducto.listar(con);
}
catch (SqlException ex)
{
foreach (SqlError err in ex.Errors)
{
//Capturar cada error y grabar un Log
}
}
} //con.Close(); con.Dispose(); con = null;
return (lbeProducto);
}
}
}
Nota: Hay que hacer referencia a la librería "System.Configuration.dll" para usar la clase ConfigurationManager para leer el archivo de configuración.
Crear el Archivo de Hoja de Estilo
Agregar un archivo de hoja de estilo llamado ACME.css y escribir lo siguiente:
body {
background-color:aqua;
}
.Titulo {
background-color:black;
color:white;
text-transform:uppercase;
font-size:xx-large;
font-weight:bold;
}
.AnchoTotal {
width:100%;
}
.Centrado {
text-align:center;
}
.Subtitulo {
background-color:white;
color:blue;
text-transform:capitalize;
font-size:x-large;
font-weight:bold;
}
.FilaCabecera {
background-color: blue;
color:white;
}
.FilaDatos {
background-color: white;
color:blue;
}
Crear la Pagina ASP .NET como un Formulario Web Form
Agregar un Formulario Web Form al proyecto llamado: "ConsultaProductos.aspx" y escribir lo siguiente:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConsultaProductos.aspx.cs" Inherits="GridView_FiltroCabecera_RptaColor.ConsultaProductos" %>
<%@ Import Namespace="GridView_FiltroCabecera_RptaColor" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Consulta de Productos</title>
<link href="ACME.css" rel="stylesheet" type="text/css" />
<script>
function filtrar(event) {
var keyCode = ('which' in event) ? event.which : event.keyCode;
if (keyCode == 13) {
var btn = document.getElementById("btnFiltrar");
if (btn != null) btn.click();
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="AnchoTotal">
<tr class="Titulo">
<td>GridView Filtros Cabecera, Total Pie y Filas Color</td>
</tr>
<tr class="Subtitulo">
<td>Consulta Desconectada de Productos (Autor: Luis Dueñas)</td>
</tr>
<tr>
<td>
<asp:GridView ID="gvProducto" AutoGenerateColumns="false" ShowFooter="true"
Width="700px" ShowHeaderWhenEmpty="true" runat="server">
<HeaderStyle CssClass="FilaCabecera" />
<RowStyle CssClass="FilaDatos" />
<FooterStyle CssClass="FilaCabecera" />
<Columns>
<asp:TemplateField HeaderText="" ItemStyle-Width="80px"
ItemStyle-HorizontalAlign="Right">
<HeaderTemplate>
Código<br />
<asp:TextBox ID="txtIdProducto"
Text="<%#formatearNumero(obeProductoCab.IdProducto)%>"
onkeypress="return filtrar(event);" Width="80px" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<%#formatearCelda(((beProducto)Container.DataItem).
IdProducto.ToString(),"IdProducto")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="300px"
FooterStyle-HorizontalAlign="Right">
<HeaderTemplate>
Descripción del Producto<br />
<asp:TextBox ID="txtNombre" Text="<%#obeProductoCab.Nombre%>"
onkeypress="return filtrar(event);" Width="300px" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<%#formatearCelda(((beProducto)Container.DataItem).
Nombre,"Nombre")%>
</ItemTemplate>
<FooterTemplate>
<b>Total de Registros encontrados: </b>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Right"
FooterStyle-HorizontalAlign="Right">
<HeaderTemplate>
Id Prov<br />
<asp:TextBox ID="txtIdProveedor"
Text="<%#formatearNumero(obeProductoCab.IdProveedor)%>"
onkeypress="return filtrar(event);" Width="80px" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<%#formatearCelda(((beProducto)Container.DataItem).
IdProveedor.ToString(),"IdProveedor")%>
</ItemTemplate>
<FooterTemplate>
<b><%#lbeFiltro.Count%></b>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Right">
<HeaderTemplate>
Id Cat<br />
<asp:TextBox ID="txtIdCategoria"
Text="<%#formatearNumero(obeProductoCab.IdCategoria)%>"
onkeypress="return filtrar(event);" Width="80px" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<%#formatearCelda(((beProducto)Container.DataItem).
IdCategoria.ToString(),"IdCategoria")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="80px"
ItemStyle-HorizontalAlign="Right">
<HeaderTemplate>
Pre Unit<br />
<asp:TextBox ID="txtPrecioUnitario"
Text="<%#formatearNumero(obeProductoCab.PrecioUnitario)%>"
onkeypress="return filtrar(event);" Width="80px" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<%#formatearCelda(((beProducto)Container.DataItem).
PrecioUnitario.ToString(),"PrecioUnitario")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Right">
<HeaderTemplate>
Stock<br />
<asp:TextBox ID="txtStock"
Text="<%#formatearNumero(obeProductoCab.Stock)%>"
onkeypress="return filtrar(event);" Width="80px" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<%#formatearCelda(((beProducto)Container.DataItem).
Stock.ToString(),"Stock")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
<asp:Button ID="btnFiltrar" OnClick="filtrarProductos" runat="server" />
</div>
</form>
</body>
</html>
Nota: El script del cliente "filtrar" se llama al dar Enter a cualquier control de la cabecera y ejecuta el clic del botón "btnFiltrar:" que es el que permite realizar el filtro y esta oculto por código.
El preview del diseño se mostrará similar a la siguiente figura:
Escribir el siguiente código C# en la página:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GridView_FiltroCabecera_RptaColor
{
public partial class ConsultaProductos : System.Web.UI.Page
{
private List<beProducto> lbeProducto;
protected List<beProducto> lbeFiltro;
protected beProducto obeProductoCab;
protected void Page_Load(object sender, EventArgs e)
{
btnFiltrar.Attributes.Add("style", "display:none");
obeProductoCab = new beProducto();
if (!Page.IsPostBack)
{
brProducto obrProducto = new brProducto();
lbeProducto = obrProducto.listar();
lbeFiltro = lbeProducto;
Session["Productos"] = lbeProducto;
gvProducto.DataSource = lbeFiltro;
gvProducto.DataBind();
}
}
protected string formatearNumero(dynamic campo)
{
string cabecera = "";
if (campo > -1) cabecera = campo.ToString();
return (cabecera);
}
private bool buscarProductos(beProducto obeProducto)
{
bool exitoIdProducto = true;
bool exitoNombre = true;
bool exitoIdProveedor = true;
bool exitoIdCategoria = true;
bool exitoPrecioUnitario = true;
bool exitoStock = true;
if (obeProductoCab.IdProducto>-1) exitoIdProducto = (obeProducto.IdProducto.ToString().Contains(obeProductoCab.IdProducto.ToString()));
if (!obeProductoCab.Nombre.Equals("")) exitoNombre = (obeProducto.Nombre.ToLower().Contains(obeProductoCab.Nombre.ToLower()));
if (obeProductoCab.IdProveedor > -1) exitoIdProveedor = (obeProducto.IdProveedor.ToString().Contains(obeProductoCab.IdProveedor.ToString()));
if (obeProductoCab.IdCategoria > -1) exitoIdCategoria = (obeProducto.IdCategoria.ToString().Contains(obeProductoCab.IdCategoria.ToString()));
if (obeProductoCab.PrecioUnitario > -1) exitoPrecioUnitario = (obeProducto.PrecioUnitario.ToString().Contains(obeProductoCab.PrecioUnitario.ToString()));
if (obeProductoCab.Stock > -1) exitoStock = (obeProducto.Stock.ToString().Contains(obeProductoCab.Stock.ToString()));
return (exitoIdProducto && exitoNombre && exitoIdProveedor && exitoIdCategoria && exitoPrecioUnitario && exitoStock);
}
protected void filtrarProductos(object sender, EventArgs e)
{
guardarFiltros();
lbeProducto=(List<beProducto>)Session["Productos"];
Predicate<beProducto> pred = new Predicate<beProducto>(buscarProductos);
lbeFiltro = lbeProducto.FindAll(pred);
gvProducto.DataSource = lbeFiltro;
gvProducto.DataBind();
}
private void guardarFiltros()
{
string sIdProducto = ((TextBox)gvProducto.HeaderRow.Cells[0].Controls[1]).Text;
obeProductoCab.IdProducto = (sIdProducto.Equals("") ? -1 : int.Parse(sIdProducto));
obeProductoCab.Nombre = ((TextBox)gvProducto.HeaderRow.Cells[1].Controls[1]).Text;
string sIdProveedor = ((TextBox)gvProducto.HeaderRow.Cells[2].Controls[1]).Text;
obeProductoCab.IdProveedor = (sIdProveedor.Equals("") ? -1 : int.Parse(sIdProveedor));
string sIdCategoria = ((TextBox)gvProducto.HeaderRow.Cells[3].Controls[1]).Text;
obeProductoCab.IdCategoria = (sIdCategoria.Equals("") ? -1 : int.Parse(sIdCategoria));
string sPrecioUnitario = ((TextBox)gvProducto.HeaderRow.Cells[4].Controls[1]).Text;
obeProductoCab.PrecioUnitario = (sPrecioUnitario.Equals("") ? -1 : decimal.Parse(sPrecioUnitario));
string sStock = ((TextBox)gvProducto.HeaderRow.Cells[5].Controls[1]).Text;
obeProductoCab.Stock = (sStock.Equals("") ? short.Parse("-1") : short.Parse(sStock));
}
protected string formatearCelda(string valor,string campo)
{
StringBuilder rpta = new StringBuilder();
string celda = valor.ToLower();
dynamic cabecera = obeProductoCab.GetType().GetProperty(campo).
GetValue(obeProductoCab, null);
if (cabecera != null)
{
if (!(cabecera is string) && (cabecera == -1)) return valor;
if ((cabecera is string) && cabecera.Equals("")) return valor;
string busca = cabecera.ToString().ToLower();
int posInicio =0;
int pos = celda.IndexOf(busca);
if (pos > -1)
{
while (true)
{
pos = celda.IndexOf(busca, pos);
if (pos > -1)
{
rpta.Append(valor.Substring(posInicio,pos-posInicio));
rpta.Append("<span style='color:red;font-bold:true'>");
rpta.Append(valor.Substring(pos, busca.Length));
rpta.Append("</span>");
posInicio = pos + busca.Length;
pos += 1;
}
else break;
}
rpta.Append(valor.Substring(posInicio, valor.Length - posInicio));
}
else rpta.Append(valor);
}
else rpta.Append(valor);
return (rpta.ToString());
}
}
}
Nota: El código mas complejo se encuentra en la función "formatearCelda" que se llama desde cada campo de cada registro mostrado en el filtro y que pasa como parámetro el valor de la celda a presentar y el campo a buscar para la cabecera. Aquí usamos Reflection para obtener el valor de cada propiedad del objeto cabecera e iniciar la búsqueda de la palabra en el valor e ir agregando en un StringBuilder la cadena con formato (negrita y colo rojo).
También es necesario antes de "filtrarProductos" llamar a la función "guardarFiltros" que se encarga de pasar los valores de los controles de la cabecera de la grilla en el objeto enlazado a la cabecera llamado: "obeProductoCab", de lo contrario se perderían los valores ingresados.
Finalmente, hay que aclarar que para poder usar desde el código HTML (aspx) un objeto o variables es necesario definirla como protected (por herencia), este es el caso de "lbeFiltro" y "obeProductoCab".
Modificar el Archivo Web.Config para especificar la cadena de conexión a Northwind
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<connectionStrings>
<add name="conNW" providerName="System.Data.SqlClient"
connectionString="uid=UsuarioNW;pwd=123456;data source=DSOFT\Sqlexpress;
initial catalog=Northwind"/>
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>
Probar la Pagina Web
Guardar el Sitio Web, clic derecho a la Pagina "ConsultaProductos.aspx" y seleccionar "Ver en el explorador". Se mostrará una ventana similar a la siguiente figura:
Se listarán todos los productos de Northwind, ahora escribir sobre el control TextBox de la cabecera del nombre la palabra "ma" y pulsar "Enter" y se filtrarán los registros apareciendo la palabra "ma" de color rojo y en negrita, tal como se muestra a continuación:
Sobre este filtro aumentar un filtro más ingresando sobre la cabecera del código del producto el número "1" y se filtrará por los 2 criterios apareciendo el número "1" de color rojo y en negrita igual que la palabra "ma", tal como se muestra en la figura de abajo:
Aumentar otro filtro para el Id de la Categoría escribiendo el número "4" y se filtrará por 3 criterios, reduciéndose mas el resultado y apareciendo de color rojo y en negrita el número "4" de la categoría, tal como se ve en la figura:
Finalmente, probemos un filtro mas que no muestre ningún registro, para lo cual aumentar como cuarto filtro que el Stock tenga el número "5", lo cual no genera ningún resultado, pero la cabecera se mantiene gracias a la propiedad: ShowHeaderWhenEmpty="true".
Si deseas mostrar todos los registros borrar cada campo de la cabecera y dar Enter en cualquiera.
Comentario Final
En este post, vimos como se puede crear en un GridView cabeceras y pies personalizados, en este caso para filtrar en forma desconectada usando plantillas de datos y código incrustado del servidor, también vimos como resaltar la palabra buscada en cada columna, aunque se aprecia mejor en columnas de tipo cadena que numérico.
Espero les guste el Demo y recuerden que No es tan complicado crear su propio control Grilla Personalizada, aunque muchos No les gusta hacerse problemas y usan sus controles jGrid, trueGrid, softGrid, superGrid, etc, pero lo mejor seria el yourSelfGrid (Grid de ti mismo).
Nota: En mis cursos creo en la cabecera DropDownList (Combos) para filtrar por Proveedor y Categoría, pero no pinto de colores los registros encontrados.
PD: Los que llevan el curso de MVC los Sábados ya tienen una ayudita para terminar lo que les deje.
Descarga:
GridView_FiltroCabecera_RptaColor
