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 condición.
Así que el objetivo de este post es mostrar como realizar este procedimiento, pero además añadiremos un elemento mas, que es como mostrar una imagen dependiendo de una condición.
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 código 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 comparación numérica.
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, también podríamos hacerlo utilizando Color.NombreColor.
Una vez completado esto, nuestro gridview se vería de la siguiente forma
Ahora, nuestro segundo trabajo será hacer que el gridView también 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 vería así
Para terminar, haremos que nuestro gridview muestre una imagen distinta dependiendo de una condición. Esta vez haremos unos pequeños 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 código 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 código de ejemplo