Change color Repeater cell

Asked

Viewed 42 times

1

I’m making a system ASPNET c# WEBFORM, and food a REPEATER with information coming from the database.

I would like a certain cell to have a certain color, according to information coming from the database.

Example: Column CodStatus, if it’s approved, the cell turns green and if it is flunked the cell turns red.

Follows the code:

Listarproposta.aspx

<asp:Repeater ID="rptProposta" runat="server">
    <HeaderTemplate>      
        <table id="tblCustomers" class="footable" border="0"  >
            <thead>         
                <tr>
                    <th data-class="expand">
                        <font ><b>Código</b></font>
                    </th>
                    <th data-class="expand">
                        <font ><b>Situação </b></font>
                    </th>
                     <th scope="col">
                        <font ><b>Cliente</b></font>
                    </th>
                    <th style="display: table-cell;" data-hide="phone">
                        <font ><b>Valor Proposta</b></font>
                    </th>
                   <th class="text-center"   style="display: table-cell;" data-hide="phone">
                            <font ><b>Ação</b></font>
                   </th>
              </tr>
           </thead>
    </HeaderTemplate>
        <ItemTemplate>
        <tr style="color:red">
           <td >
                 <%# DataBinder.Eval(Container.DataItem, "codproposta") %>   
           </td>
           <td>
                 <%#  DataBinder.Eval(Container.DataItem, "situacao") %>   
           </td>
            <td>
                 <%# DataBinder.Eval(Container.DataItem, "cliente") %>   
           </td>
            <td>
                 <%# DataBinder.Eval(Container.DataItem, "valortotal") %>   
           </td>
           <td>   
                <asp:ImageButton ID="imbtnAlterar" ImageUrl="~/img/editar.ico"  Width="30px" Height="30px" runat="server" CommandArgument='<%# Eval("codproposta") %>' />    
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/excluir.ico" Width="30px" Height="30px" CommandArgument='<%# Eval("codproposta")  %>'   /> 
           </td>
        </tr>
        </ItemTemplate>
        <FooterTemplate>      
    </table>              
    </FooterTemplate>
</asp:Repeater>

The way I carry REPEATER

Listarproposta.aspx.Cs

protected void CarregarProposta()
{
    Proposta p = new Proposta();
    p.codproposta = 0;
    SqlDataReader drProposta = p.ListarProposta(p);
    rptProposta.DataSource = drProposta;
    rptProposta.DataBind();

}

1 answer

2


To put a color in the cell just encode a line comparing the result of each loaded item if the value of that field is one or the other, minimum example:

  • Css

    <style>
      .aprovado {
        background-color: green;
      }
      .reprovado {
        background-color: red;
      }
    </style>
    

and from css put this at the time of creation in the <ItemTemplate>:

<table>
    <asp:Repeater ID="RptLista" runat="server">
    <HeaderTemplate>
      <thead>
        <tr>
          <th>Código</th>
          <th>Nome</th>
          <th>Status</th>
        </tr>
      </thead>
    </HeaderTemplate>
    <ItemTemplate>
      <tbody>
        <tr>
          <td><%# DataBinder.Eval(Container.DataItem, "Codigo") %></td>
          <td><%# DataBinder.Eval(Container.DataItem, "Nome") %></td>
          <td class="<%# DataBinder.Eval(Container.DataItem, "Status")%>">
            <%# DataBinder.Eval(Container.DataItem, "Status") %>
          </td>
        </tr>
      </tbody>
    </ItemTemplate>
    </asp:Repeater>
</table>

that is, this is the line of your question:

<td class="<%# DataBinder.Eval(Container.DataItem, "Status")%>">

where this choice of the two classes created for .aprovado and .reprovado determined in the value of the return contained in the sent list.

  • Example

inserir a descrição da imagem aqui

  • 1

    I was going to post almost exactly the same thing, only I had created the styles as . approved and .reproved... so I wouldn’t even need the if in Bind

  • I understood your idea is really good, I hadn’t thought about it @Leandroangelo

  • @Leandroangelo made the change.

  • 1

    Thank you very much. This is exactly what I wanted. It worked correctly.

Browser other questions tagged

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