On an HR management site, there is a readiness history query. Here's how the page was made:
ASPX FILE
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="historicoProntidao.aspx.cs" Inherits="historicoProntidao" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Histórico do Nível de Prontidão</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body class="panelSemBorda">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="header">
<div class="title">
<asp:Image ID="Image2" runat="server" ImageUrl="~/imagens/Logo.png" BorderStyle="None"/>
</div>
<div class="titleCenter"><asp:Label ID="lblTitulo" runat="server" Text="Histórico de Prontidão"></asp:Label></div>
<div class="loginDisplay"> </div>
<br /><br /><br />
</div>
<div class="clear hideSkiplink">
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal">
<Items><asp:MenuItem NavigateUrl="~/loginAvaliacoes.aspx" Text="Sair" Value="Sair"/></Items>
<Items><asp:MenuItem NavigateUrl="~/home.aspx" Text="Voltar para Gestão de RH" Value="Voltar para Gestão de RH"/></Items>
</asp:Menu>
</div>
</div>
<div align="center" class="central">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<uc:messagebox ID="mbxGeral" runat="server" />
<asp:HiddenField ID="hfCodigoColaboradorAvaliador" runat="server" />
<table cellpadding="0" cellspacing="2" border="0">
<tr>
<td colspan="2"><asp:Label ID="lblFiltrosPesquisa" runat="server" Text="Selecione o a unidade/corporativo para visualizar a evolução dos colaboradores disponíveis para avaliar:"></asp:Label></td>
</tr>
<tr style="visibility:hidden">
<td><asp:Label ID="lblPeriodoAvaliacao" runat="server" Text="Período de avaliação:"></asp:Label></td>
<td>
<asp:DropDownList ID="ddlPeriodoAvaliacao" runat="server" AppendDataBoundItems="true" onselectedindexchanged="ddlPeriodoAvaliacao_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="" Text="Selecione o período de avaliação" Selected="True"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td><asp:Label ID="lblUnidadeEmpresa" runat="server" Text="Unidade/Corporativo:"></asp:Label></td>
<td>
<asp:DropDownList ID="ddlUnidade" runat="server" AppendDataBoundItems="true">
<asp:ListItem Value="" Text="Selecione a unidade" Selected="True"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ValidationGroup="pesquisar" ID="rfvUnidade" runat="server" ErrorMessage="obrigatório preenchimento da unidade/corporativo" ControlToValidate="ddlUnidade" Display="None"></asp:RequiredFieldValidator>
<ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="rfvUnidade" Enabled="True"></ajaxtoolkit:ValidatorCalloutExtender>
<asp:LinkButton ID="lkbPesquisar" runat="server" Text="Pesquisar" onclick="lkbPesquisar_Click" ValidationGroup="pesquisar"></asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2"><br /></td>
</tr>
<tr>
<td colspan="2">
<asp:GridView ID="gwColaboradores" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="#E74310" HeaderStyle-ForeColor="White">
<Columns>
<asp:BoundField DataField="codigoColaboradorAvaliado" HeaderText="Código" HeaderStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="nome" HeaderText="Nome" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" />
<asp:BoundField DataField="Cargo" HeaderText="Cargo" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="codigoUnidade" HeaderText="Código Unidade" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" />
<asp:BoundField DataField="Setor" HeaderText="Setor" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="anoAvaliacao" HeaderText="Ano da Avaliação" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="TotalFinal" HeaderText="Total Final (%)" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" DataFormatString="{0:F2}" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Resultado" HeaderText="Resultado" HeaderStyle-HorizontalAlign="Center" HtmlEncode="False" ItemStyle-HorizontalAlign="Center" />
</Columns>
</asp:GridView>
<asp:Label ID="lblNaoEncontrado" runat="server" Text="Não foram encontrados resultados" Visible="false" CssClass="mensagemErro"></asp:Label>
<br /><br />
</td>
</tr>
</table>
<asp:Image ID="NineBoxDiv" runat="server" ImageUrl="imagens/NineBox.png" BorderStyle="None" Visible="false" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ddlPeriodoAvaliacao" />
</Triggers>
</asp:UpdatePanel>
<ajaxtoolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1" BehaviorID="animation">
<Animations>
<OnUpdating><FadeOut minimumOpacity="0.3" /></OnUpdating>
<OnUpdated><FadeIn minimumOpacity="0.3" /></OnUpdated>
</Animations>
</ajaxtoolkit:UpdatePanelAnimationExtender>
</div>
<div class="clear hideSkiplink"><br /></div>
<div class="footer">
</div>
</form>
</body>
</html>
ASPX.CS FILE
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
public partial class historicoProntidao : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["usuario"] == null)
Response.Redirect("~/login.aspx?session=0");
if (!IsPostBack)
{
Classes.colaborador colaborador = (Classes.colaborador)Session["usuario"];
hfCodigoColaboradorAvaliador.Value = colaborador.codigo.ToString();
atualizaUnidades(hfCodigoColaboradorAvaliador.Value, "5");
}
}
private void atualizaUnidades(string codigoColaborador, string codigoAvaliacao)
{
if (codigoColaborador!= "" && codigoAvaliacao != "")
{
Classes.colaborador colaborador = (Classes.colaborador)Session["usuario"];
if (colaborador.avaliaTodasUnidades)
ddlUnidade.DataSource = Classes.unidade.consultaUnidadeAvaliacao("", int.Parse(codigoAvaliacao));
else
ddlUnidade.DataSource = Classes.unidade.consultaUnidadeAvaliacao(codigoColaborador, int.Parse(codigoAvaliacao));
ddlUnidade.DataValueField = "codigo";
ddlUnidade.DataTextField = "descricao";
ddlUnidade.DataBind();
}
else
{
ddlUnidade.Items.Clear();
ddlUnidade.Items.Add("Selecione a unidade");
}
}
protected void lkbPesquisar_Click(object sender, EventArgs e)
{
bool gerencia = false;
bool coordenador = false;
bool analista = false;
int codigo = int.Parse(hfCodigoColaboradorAvaliador.Value);
int codigoUnidade = int.Parse(ddlUnidade.SelectedItem.Value);
//int codigoPeriodo = int.Parse(ddlPeriodoAvaliacao.SelectedItem.Value);
Classes.colaborador colaborador = (Classes.colaborador)Session["usuario"];
DataTable dt = Classes.cargo.consultaCargoColaborador(codigo);
DataTable dtColaboradores = null;
if (dt.Rows.Count > 0)
{
gerencia = dt.Rows[0]["cargoGerencia"].ToString() == "False" ? false : true;
coordenador = dt.Rows[0]["cargoCoordenador"].ToString() == "False" ? false : true;
analista = dt.Rows[0]["cargoAnalista"].ToString() == "False" ? false : true;
if (gerencia || colaborador.avaliaTodasUnidades)
dtColaboradores = Classes.colaborador.consultaColaboradorProntidao(codigoUnidade);
else
{
if (coordenador)
dtColaboradores = Classes.colaborador.consultaColaboradorProntidao(codigoUnidade);
}
}
gwColaboradores.DataSource = dtColaboradores;
gwColaboradores.Columns[0].Visible = false;
gwColaboradores.Columns[1].Visible = true;
gwColaboradores.Columns[2].Visible = true;
gwColaboradores.Columns[3].Visible = false;
gwColaboradores.Columns[4].Visible = true;
gwColaboradores.Columns[5].Visible = true;
gwColaboradores.Columns[6].Visible = true;
gwColaboradores.Columns[7].Visible = true;
gwColaboradores.DataBind();
}
protected void ddlPeriodoAvaliacao_SelectedIndexChanged(object sender, EventArgs e)
{
atualizaUnidades(hfCodigoColaboradorAvaliador.Value, ddlPeriodoAvaliacao.SelectedItem.Value);
}
}
The query works perfectly, always bringing a Gridview with the person's data and the result of evaluations that have been performed (between 0 and 100%).
But I wanted to see different images shown when I hover over the Gridview lines. For example, between 0 and 20%, it is an image. Between 20 and 40% is another image. And so it goes. I believe the feature to use is onmouseover.
How can I do this?