Show image when mouseover in gridview row

0

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">&nbsp;</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>
                    &nbsp;&nbsp;<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?

    
asked by anonymous 13.12.2016 / 13:51

1 answer

1

Gustavo, I made an example, look:

ASPX

   <asp:GridView ID="gwColaboradores" runat="server" AutoGenerateColumns="false"
                    HeaderStyle-BackColor="#E74310" HeaderStyle-ForeColor="White">
        <Columns>                
            <asp:BoundField DataField="Avaliacao" HeaderText="Avaliação (%)" HeaderStyle-HorizontalAlign="Center" 
                                    HtmlEncode="False" ItemStyle-HorizontalAlign="Center" />                
        </Columns>
    </asp:GridView>

CODE-BEHIND

public class Colaborador
{
    public int Avaliacao { get; set; }

    public Colaborador(int avaliacao)
    {
        Avaliacao = avaliacao;
    }
}

public partial class _default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<Colaborador> lista = new List<Colaborador>();
        lista.Add(new Colaborador(17));
        lista.Add(new Colaborador(37));
        lista.Add(new Colaborador(78));

        gwColaboradores.DataSource = lista;
        gwColaboradores.DataBind();
    }

}

The generated html code is this here:

<table cellspacing="0" rules="all" border="1" id="gwColaboradores" style="border-collapse:collapse;">
    <tr style="color:White;background-color:#E74310;">
        <th align="center" scope="col">Avaliação (%)</th>
    </tr><tr>
        <td align="center">87</td>
    </tr><tr>
        <td align="center">37</td>
    </tr><tr>
        <td align="center">78</td>
    </tr>
</table>

With this I created JsFiddle ( link ) to test with Jquery how to display different images from the column values of evaluation:

var imgPath = "";
 var avaliacao = $(this).html();
 if(Number(avaliacao) > 50)
 {
     imgPath = "https://vc.vse.cz/wp-content/uploads/2014/08/Accept-icon.png";
 }else
 {
     imgPath = "https://cdn4.iconfinder.com/data/icons/hospital-and-medical-v2/512/danger_poison_venom_toxic-128.png";
 }

Then by hovering over a line, it takes the value of the evaluation column and tests a range:

Another way would be to have the image (path) in the Collaborator object in the RowDatabound of the grid test the if to know the value of the evaluation and assign the image to the Collaborator image attribute. But it depends on you, if it was the photo of the developer even makes sense but if the image you are viewing is just a frontend functionality it makes more sense to have everything in javascript. As I have seen that your COlaborator does not have the url of the image I chose the javascript path

    
19.12.2016 / 19:51