[SOLUCIONADO] gridview, pintar de color los valores de una celda

[eamanesims]

Hola a todos!

Bueno os explico lo que necesito, cargo un gridview con las filas y columnas que devuelven unas consultas sql, hay un campo que se llama "estado", en todas las sql, y éste puede ser: PROCESADO, EN PROCESO O PENDIENTE.

Dependiendo de cual sea el estado necesitaría pintar de color rojo, naranja o verde pero no quiero pintar ni la celda ni la string, porque queda algo raro para el estilo que tiene la tabla, entonces:

¿hay alguna forma de simular lo que sale en algunos programas que delante de la string tienen un cuadrado o algún tipo de carácter que es el que se pinta de color? de forma que visualmente se vea qué estado tiene sin pintar toda la celda.

No se si me entenderéis jeje, gracias de antemano.

[AWesker]

¿Cómo te va eamanesims?

No se si te entendí muy bien, pero lo que queres hacer es remarcar el borde de la fila.

Dejame decirte que tienes varias opciones, entre las cuales puedes colorear el borde desde la propiedad e.Row.ControlStyle y con css. Este sería un pequeño ejemplo:

Código ASP:

protected void GV_Detalles_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (Convert.ToBoolean(DataBinder.Eval(e.Row.DataItem, "PROCESADO")))//Una forma de comparar el valor. En este caso un bit en SQL
                {
                    e.Row.ControlStyle.BackColor = System.Drawing.Color.FromArgb(162, 37, 37);//Fondo
                    e.Row.ControlStyle.ForeColor = System.Drawing.Color.White;//Fuente
                    e.Row.ControlStyle.BorderColor = System.Drawing.Color.Green;//Borde (quizá este te sea de ayuda)
                    e.Row.CssClass = "EstiloProcesado";//Estilo (quizá este también te sea de ayuda)
                }
            }
        }
 

Cualquier cosa, nos avisas.

Saludos...

[eamanesims]

Hola AWesker! antes de nada gracias por tu tiempo y tu respuesta, no era eso lo que necesitaba pero no había pensado en los bordes, quizás marcándolo así quede bien y visualmente se diferencia rápido,
el 'backcolor' y 'forecolor' lo he probado, ahora lo tengo con forecolor pero no se no me termina de convencer para el programa toda la tabla blanca y fuente negra y de pronto letras de colores y el fondo queda demasiado chocante...

Lo que yo buscaba era algo asi:



(es un paint cutre pero para que se entienda lo que necesito :P)

necesito que con un vistazo rápido se diferencien los procesados y los que no lo están, he visto esto en programas de gestión y había pensado que quizás se podría hacer pintando un carácter o un punto con una fuente mayor... no hace falta que sea un cuadrado, no sé no veo la forma de hacerlo, quizás es porque llevo muy poco con asp y usando gridview o quizás pido algo que no se puede hacer... podría ser jeje

ya me dirás si lo que pido es imposible mientras voy a probar esto que me dijiste ;)

[AWesker]

Ya te entendí. Si, es posible, de hecho, se me ocurren varias formas: un div con css, una imagen, un spam. En fin, cualquier elemento que te permita realizar el efecto.

Por ejemplo, con un div:

Código ASP:

protected void GV_Detalles_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (Convert.ToBoolean(DataBinder.Eval(e.Row.DataItem, "PROCESADO")))//Una forma de comparar el valor. En este caso un bit en SQL
                {
                    System.Web.UI.HtmlControls.HtmlGenericControl Div = new System.Web.UI.HtmlControls.HtmlGenericControl();
 
                    Div = ((System.Web.UI.HtmlControls.HtmlGenericControl)e.Row.FindControl("DivEstado"));
                    Div.Attributes["class"] = "ClaseProcesado";
                }
            }
        }
 

Y en el template del GridView esta este TemplateField:

Código ASP:

<ItemTemplate>
    <table>
          <tr>
              <td>
                     <div id="DivEstado" runat="server" style="width: 10px; height: 10px;">
                      </div>
              </td>
             <td>
                     <%#Eval("Estado")%>
             </td>
         </tr>
   </table>
</ItemTemplate>
 

Me avisas si queres un ejemplo cambiando la imagen...

[eamanesims]

hola de nuevo AWesker! ^^ ya entiendo la idea al principio me he liado un poco con el itemtemplate.

Te cuento, funciona guay pero no comenté que mi rejilla es dinámica sorry... :S, (lo siento parece que son todo pegas...)

Con itemtemplate solo puedo ponerle plantilla a una columna que será fija en la rejilla no? pero claro esa columna hay consultas que si la tienen, otras que no y cambia el numero de celda por ej. en una consulta es la celda 14 en otra la 17, ¿hay forma de adaptar esto para una columna dinámica? con itemtemplate el div de color aparecería en otra columna distinta a la del estado, es decir aparecería el div de color verde por ej. en una columna y al lado la columna de estado que pone "PENDIENTE"

yo he hecho otra cosa pero supongo que esta forma no es buena ya que estoy metiendo codigo HTML en un ascx.cs y además no parece muy rentable:

Código:

if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (e.Row.Cells[14].Text == "PROCESADO")
                {
                    e.Row.Cells[14].Text = "<img src='/App_Themes/EstadoRojo.png' width=10px height=10px border=0 style='backcolor:#000000'>" + e.Row.Cells[14].Text;
                }
                else if (e.Row.Cells[14].Text == "EN PROCESO")
                {
                    e.Row.Cells[14].Text = "<img src='/App_Themes/EstadoNaranja.png' width=10px height=10px border=0 style='backcolor:#000000'>" + e.Row.Cells[14].Text;
                }
                else
                {
                    e.Row.Cells[14].Text = "<img src='/App_Themes/EstadoVerde.png' width=10px height=10px border=0 style='backcolor:#000000'>" + e.Row.Cells[14].Text;
                }
            }

Además de lo del codigo html tendría que hacer esto por cada tabla que tiene esa columna, por el tema de que cambia el numero de celda...y no me parece razonable :( no se muy bien como solucionar esto

[eamanesims]

Bueno tras estar probando y buscando mil formas lo he conseguido! :D

Muestro cómo por si le sirve a alguien:

en el evento rowdatabound del gridview:

Código:

 protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                int index = GetColumnIndexByName(e.Row, "NombreColumnaBuscar");
                if (index != -1)
                {
                    if (e.Row.Cells[index].Text == "PROCESADO")
                    {
                        e.Row.Cells[index].Text = "<img src='/App_Themes/EstadoRojo.png'>" + e.Row.Cells[index].Text;
                    }
                    else if (e.Row.Cells[index].Text == "EN PROCESO")
                    {
                        e.Row.Cells[index].Text = "<img src='/App_Themes/EstadoNaranja.png'>" + e.Row.Cells[index].Text;
                    }
                    else if (e.Row.Cells[index].Text == "PENDIENTE")
                    {
                        e.Row.Cells[index].Text = "<img src='/App_Themes/EstadoVerde.png'>" + e.Row.Cells[index].Text;
                    }
                }
            }
        }

//ESTA FUNCIÓN ES LA QUE RETORNA EL INDEX DE LA COLUMNA SI LA ENCUENTRA, SINO LE HE PUESTO QUE DEVUELVA -1:
 public static int GetColumnIndexByName(GridViewRow row, string columnName)
        {
            int columnIndex = 0;
            bool encontrado = false;

            foreach (DataControlFieldCell cell in row.Cells)
            {
                if (cell.ContainingField is BoundField)
                    if (((BoundField)cell.ContainingField).DataField.Equals(columnName))
                    {
                        encontrado = true;
                        break;
                    }
                columnIndex++; 
            }

            if (encontrado == false)
            {
                columnIndex = -1;
            }
            return columnIndex;
        }

la parte que he pintado de azul es porque bueno eso habría que ponerlo en alguna función o clase que enviandole la columna por ej. retorne la imagen que hay que poner o la string que hay que ponerle al valor de esa celda (eso ya cada uno como lo quiera hacer) creo que al final no quedó tan mal y sirve para cualquier tabla que se cargue en el gridview, de forma que esté donde esté esa columna pondra cuadrado de color y sino está no hará nada

yo lo he adaptado a mi código el post original de donde lo saqué: http://stackoverflow.com/questions/9...iew-in-asp-net

Un saludo y gracias por tu tiempo AWesker