Show image while hovering online mouse gridview

Question

Show image while hovering online mouse gridview

Asked 7 years, 9 months ago

Viewed 195 times

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 data of the person and the result of evaluations that were carried out (between 0 and 100%).

But I wanted different images to be shown when I hover over the Gridview lines. For example, between 0 and 20% is an image. Between 20 and 40% is another image. And so on. I believe the resource to be used is onmouseover.

How can I do that?

Create a hidden property and populate according to the percentage. When using mouseover take this property to display the image.

– Denis

2016/12/13 at 13:51
@Denis How do I put this in code? I’ve searched some sites but couldn’t get anything like this.

– Gustavo Hoppe Levin

2016/12/13 at 13:55
Create the column for the property and arrow as Hidden: <Asp:Boundfield Datafield="propertyParaIndicarImage" /> Create the property "propertyParaIndicarImage" in the class "collaborator" and populate with the indicator before setting dtColaborators. About show the image: http://stackoverflow.com/questions/20678846/display-image-on-mouse-hover-in-gridview-row http://www.aspforums.net/Threads/127988/Display-mage-ridView-Row-MouseOver-Hover-in-ASPNet/

– Denis

2016/12/13 at 14:08

1 answer

Browser other questions tagged c# asp.net image gridview

You are not signed in. Login or sign up in order to post.

by rodrigorf • **1,021** points · Answer 1 · 2016-12-19T18:51:31+00:00

Gustavo, I made an example, look at this:

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 one:

<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>

So I created Jsfiddle(https://jsfiddle.net/rodrigorf/Lo734r51/2/) to test with Jquery how to display different images from the evaluation column values:

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 when passing the mouse over a row, takes the value of the evaluation column and tests a track:

Another way would be to have the image(path) in the Collaborator object, in the Rowdatabound grid do the if test to know the value of the evaluation and assign the image you want to the Contributor image attribute. But this depends on you, if it was the photo of the collaborator it makes sense but if the image you are going to display is just a frontend functionality it makes more sense to have everything in javascript. As I saw that your Contributor does not have the image url I chose the javascript path