Colorear celdas y filas en un Gridview

Friday, May 6, 2011 3:30 PM

ltimamente he visto muchas consultas sobre como colorear las celdas o filas de un gridview basados en un
determinado valor o condicin.
As que el objetivo de este post es mostrar como realizar este procedimiento, pero adems aadiremos un
elemento mas, que es como mostrar una imagen dependiendo de una condicin.
Empezaremos trabajando en como cambiar el color de una fila del Gridview:
Supongamos que tenemos un Gridview que tiene un campo de tipo Literal en un TemplateField que muestra
un total o cantidad y queremos con base a ese total colorear la fila completa.
1: <asp:TemplateField HeaderText="Total">
2: <ItemTemplate>
3: <asp:Literal ID="ltltotal" runat="server" Text='<%#
Eval("total2") %>' />
4: </ItemTemplate>
5: </asp:TemplateField>
Para lograr que nuestras celdas puedan cambiar de Color, utilizaremos el Evento OnRowDataBound el cual
se ejecuta por cada celda del GridView , por tanto, dicho evento debe estar asociado a nuestro Gridview de lo
contrario no se ejecutar
1: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="524px"
2: OnRowDataBound="GridView1_RowDataBound">
Una vez asociado el evento y creado el ItemTeplate, es hora de programar el evento RowDataBound desde el
CodeBehind
1: protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
2: {
3: if (e.Row.RowType == DataControlRowType.DataRow)
4: {
5: Literal tot =(Literal)e.Row.FindControl("ltltotal");
6: Double total = Double.Parse(tot.Text);
7:
8: if (total == 500)
9: {
10: e.Row.BackColor = Color.FromName("#c6efce");
11: //e.Row.Cells[2].BackColor = Color.FromName("#c6efce");
12: }
13: if (total >= 600)
14: {
15: e.Row.BackColor = Color.FromName("#ffeb9c");
16:
17: }
18: if (total <300 )
19: {
20: e.Row.BackColor = Color.FromName("#ffc7ce");
21:
22: }
23: }
24: }
Si examinamos el cdigo anterior, vemos dos cosas importantes:
1. Accedemos al control en el GridView mediante el FindControl
2. Convertir,os ese objeto a double para poder hacer una comparacin numrica.
El color a la fila (row) lo asignamos mediante la propiedad BackColor, si observamos con detenimiento, a esa
propiedad le estamos asignando la propiedad Color.FromName(numero de color).
Por supuesto que esta no es la nica forma de asignar el color, tambin podramos hacerlo utilizando
Color.NombreColor.
Una vez completado esto, nuestro gridview se vera de la siguiente forma

Ahora, nuestro segundo trabajo ser hacer que el gridView tambin se coloreo pero esta vez no toda la fila
sino nicamente las celdas. De igual forma, requerimos el evento RowDataBound, solo que esta vez la forma
de asignar el color varia, pues se hace directamente sobre la celda.
1: protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
2: {
3: if (e.Row.RowType == DataControlRowType.DataRow)
4: {
5: Literal tot = (Literal)e.Row.FindControl("ltltotal");
6: Double total = Double.Parse(tot.Text);
7:
8: if (total == 500)
9: {
10:
11: e.Row.Cells[3].BackColor = Color.FromName("#c6efce");
12: }
13: if (total >= 600)
14: {
15: e.Row.Cells[3].BackColor = Color.FromName("#ffeb9c");
16:
17: }
18: if (total < 300)
19: {
20: e.Row.Cells[3].BackColor = Color.FromName("#ffc7ce");
21:
22: }
23: }
24: }
Al concluir nuestro GridView se vera as

Para terminar, haremos que nuestro gridview muestre una imagen distinta dependiendo de una condicin.
Esta vez haremos unos pequeos cambios:
1. Comparamos con base al valor aprobado, es decir un valor True/False para mostrar la imagen
2. Utilizamos la propiedad DataKeyNames del Gridview pues guardar el valor True/False, ya que la columna
Aprobado no ser mostrada sino nicamente la imagen.
3. Utilizaremos en control Image dentro de un ItemTemplate para mostrar la imagen nueva.
1: <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="false" Width="524px"
2: DataKeyNames="aprovado" OnRowDataBound="GridView3_RowDataBound">
1: <asp:TemplateField HeaderText="Aprobado">
2: <ItemTemplate>
3: <asp:image ID="imgestado" runat="server" />
4: </ItemTemplate>
5: </asp:TemplateField>
El evento rowDataBound
1: protected void GridView3_RowDataBound(object sender, GridViewRowEventArgs e)
2: {
3: if (e.Row.RowType == DataControlRowType.DataRow)
4: {
5:
6: string KeyID = GridView3.DataKeys[e.Row.RowIndex].Value.ToString();
7:
8:
9: System.Web.UI.WebControls.Image imagen =
(System.Web.UI.WebControls.Image)e.Row.FindControl("imgestado");
10:
11: if (KeyID == "True")
12: {
13: imagen.ImageUrl = "GreenCircle5.jpg";
14:
15: }
16: if (KeyID == "False")
17: {
18: imagen.ImageUrl = "red-24.png";
19:
20: }
21:
22: }
23: }
En el cdigo anterior lo mas importante, es la forma en que el valor del DataKeysNames es tomado, vemos
que lo realizamos mediante el e.Row.RowIndex y lo convertimos a string para luego poder evaluarlo.

Por ltimo les dejo el cdigo de ejemplo