Conditional Formating in ASP.NET GRIDVIEW

Question

User-47788187 posted

Dear Experts,

I am trying to apply different color in row(OT) .Condition is if value is above 3 then RED color , if value is below 1 then green color.

I have tried but full red color coming. please note that this(OT) value is not from database instead its derived from two columns(Hours_Worked-dutyhours)

my asp.net code below,

         <Columns>
                    
                       <asp:BoundField DataField="event_Date" HeaderText="creation_Date" DataFormatString="{0:d}" SortExpression="event_Date" ReadOnly="True" />
                   <asp:BoundField DataField="event_Date" HeaderText="DAY" DataFormatString="{0:dddd}" SortExpression="event_Date" ReadOnly="True" />
                     <asp:BoundField DataField="person_num" HeaderText="person_num" SortExpression="person_num" />
                    <asp:BoundField DataField="full_name" HeaderText="full_name" SortExpression="full_name" />
                     <asp:TemplateField FooterText="preffered_name" HeaderText="Department">
                        
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("preffered_name") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
 
                     <asp:BoundField DataField="CLOCK_IN1" HeaderText="CLOCK_IN1" DataFormatString="{0:hh\:mm}" ReadOnly="True" SortExpression="CLOCK_IN1"   />
                    <asp:BoundField DataField="CLOCK_OUT1" HeaderText="CLOCK_OUT1" DataFormatString="{0:hh\:mm}" ReadOnly="True" SortExpression="CLOCK_OUT1"  />
                    <asp:BoundField DataField="CLOCK_IN2" HeaderText="CLOCK_IN2" DataFormatString="{0:hh\:mm}" ReadOnly="True" SortExpression="CLOCK_IN2"  />
                    <asp:BoundField DataField="CLOCK_OUT2" HeaderText="CLOCK_OUT2" DataFormatString="{0:hh\:mm}" ReadOnly="True" SortExpression="CLOCK_OUT2"  />

                    <asp:BoundField DataField="CLOCK_IN3" HeaderText="CLOCK_IN3" DataFormatString="{0:hh\:mm}" ReadOnly="True" SortExpression="CLOCK_IN3" />
                    <asp:BoundField DataField="CLOCK_OUT3" HeaderText="CLOCK_OUT3" DataFormatString="{0:hh\:mm}"  ReadOnly="True" SortExpression="CLOCK_OUT3" />
                
                    <asp:BoundField DataField="CLOCK_IN4" HeaderText="CLOCK_IN4" DataFormatString="{0:hh\:mm}"  ReadOnly="True" SortExpression="CLOCK_IN4" />
                    <asp:BoundField DataField="CLOCK_OUT4" HeaderText="CLOCK_OUT4" DataFormatString="{0:hh\:mm}" ReadOnly="True" SortExpression="CLOCK_OUT4" />
                    <asp:BoundField DataField="HoursWorked" HeaderText="HoursWorked" ReadOnly="True" SortExpression="HoursWorked" />
                    <asp:BoundField DataField="dutyhours" HeaderText="DutyHours" ReadOnly="True" SortExpression="HoursWorked" />

                        
                                     <asp:TemplateField HeaderText="OT">
  <ItemTemplate>
   <asp:Literal
       ID="Literal4"
       runat="server"
       Text='<%# ok(Eval("dutyhours").ToString(), Eval("HoursWorked").ToString() )%>'>
    </asp:Literal>
  </ItemTemplate>
</asp:TemplateField>

C#

    protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)

        {
            int ot = Convert.ToInt32(e.Row.Cells[14].Text);

            if (ot > 3)
                e.Row.Cells[15].backColor = System.Drawing.Color.RED;
            else if (ot > 0 && ot < 1)
                e.Row.Cells[15].backColor = System.Drawing.Color.Green;
            else if (ot > 5)
                e.Row.Cells[15].backColor = System.Drawing.Color.Red;
        }

This is giving complete column is red color instead of specific row in column

Answer 1

User-6180675 posted

av2020

C#

    protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)

        {
            int ot = Convert.ToInt32(e.Row.Cells[14].Text);

            if (ot > 3)
                e.Row.Cells[15].backColor = System.Drawing.Color.RED;
            else if (ot > 0 && ot < 1)
                e.Row.Cells[15].backColor = System.Drawing.Color.Green;
            else if (ot > 5)
                e.Row.Cells[15].backColor = System.Drawing.Color.Red;
        }

There is some problem with your condition , also I am not sure why you are using SelectedIndexChanged event to change the cell color . I would prefer doing it on RowDataBound event. I have updated the code of color change below

protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)

        {
            int ot = Convert.ToInt32(e.Row.Cells[14].Text);
 
            if (ot > 0 && ot < 1)

               e.Row.BackColor = System.Drawing.Color.Green; // change the entire row backcolor instead of the  column 
           else if (ot > 3)

               e.Row.BackColor = System.Drawing.Color.RED;
         } 
     }

Check with this updated code . I have edited my answer to change the row color instead of the column

Answer 2

User-47788187 posted

Hello Nilli,

Thanks still same,

rowdataband and selectindex is same?

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Width="1523px" OnRowCommand="GridView2_RowCommand" Height="330px" style="text-align: center" AllowSorting="True" OnRowDataBound="GridView2_SelectedIndexChanged">

current output,  as per your code 3.70 suppose to be RED

Answer 3

User-6180675 posted

av2020

urrent output,  as per your code 3.70 suppose to be RED

Rowdatabound and selectedindexchanged are two different event but it would not matter in this case as you are calling the method GridView2_SelectedIndexChanged in OnRowDataBound event itself . According to your data, you don't have integer values in that column , so it will be better to convert the row value to a double like I did in the code below'

Use the below code if you want to change the entire row color :

 protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                double ot;
                if(Double.TryParse(e.Row.Cells[14].Text,out ot))
                {
                    if (ot > 0 && ot < 1)

                        e.Row.BackColor = System.Drawing.Color.Green; // change the entire row backcolor instead of the  column 
                    else if (ot > 3)

                        e.Row.BackColor = System.Drawing.Color.Red;
                }

               
            }
        }

Use the below code if you want to change only the cell backcolor :

 protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                double ot;
                if(Double.TryParse(e.Row.Cells[14].Text,out ot))
                {
                    if (ot > 0 && ot < 1)

                        e.Row.Cells[5].BackColor = System.Drawing.Color.Green; // change the cell backcolor instead of the row
                    else if (ot > 3)

                        e.Row.Cells[5].BackColor = System.Drawing.Color.Red;
                }

               
            }
        }

Let me know if it works for you. P.S : The method name should be GridView2_RowDataBound as per convention.

Answer 4

User-47788187 posted

Hi,

Still same even after changing to " GridView2_RowDataBound"

    protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            double ot;
            if (Double.TryParse(e.Row.Cells[14].Text, out ot))
            {
                if (ot > 1 && ot < 3)

                    e.Row.Cells[15].BackColor = System.Drawing.Color.Green; // change the cell backcolor instead of the row
                else if (ot > 4)

                    e.Row.Cells[15].BackColor = System.Drawing.Color.Red;

            }


        }

    }

Output :

supposed to be 2.20 should be green and 4.90 ,4.23 should be red color and rest all default color.

Answer 5

User-6180675 posted

Sorry you should be checking the value of OT field which is cell[15] . Previously you were checking the value of the column next to OT which is always greater than 4 hence you were getting only red.

Check with the below code

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            double ot;
            if (Double.TryParse(e.Row.Cells[15].Text, out ot))  // this cell points to OT
            {
                if (ot > 1 && ot < 3)

                    e.Row.Cells[15].BackColor = System.Drawing.Color.Green; // change the cell backcolor instead of the row
                else if (ot > 4)

                    e.Row.Cells[15].BackColor = System.Drawing.Color.Red;

            }


        }
    }

Answer 6

User-6180675 posted

  if (Double.TryParse(e.Row.Cells[14].Text, out ot))

Just change the Cell no to Cell[15] as I mentioned above.

Answer 7

User-47788187 posted

no changes ?

my gridview

Answer 8

User-6180675 posted

I have edited my answer check the code below . You cannot directly access the cell[15] as it has literal control. You have to access the control then it's text value.

protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
        {
            double ot;
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Literal lt = (Literal)e.Row.Cells[15].FindControl("Literal4");
               
                if (Double.TryParse(lt.Text, out ot))
                {
                    if (ot > 1 && ot < 3)

                        e.Row.Cells[15].BackColor = System.Drawing.Color.Green; // change the entire row backcolor instead of the  column 
                    else if (ot > 4)

                        e.Row.Cells[15].BackColor = System.Drawing.Color.Red;
                }

               
            }
        }

let me know if it works

Answer 9

User-47788187 posted

hi i am trying to change the color on column name OT .value is > 1 && ot < 2) if else (ot > 3).

row cell value can be any on in this column OT ?

Answer 10

User-47788187 posted

 public string ok(string HoursWorked, string government_num)
    {
        decimal p1 = 0.0M;
        decimal p2 = 0.0M;
        Decimal.TryParse(HoursWorked, out p1);
        Decimal.TryParse(dutyhours, out p2);
        if (p2 > 0)
        {
            return (p1 - p2).ToString("N2");
        }
        return String.Empty; // or whatever default you want to show in your page
    }

Answer 11

User-6180675 posted

just check with my code above it worked for me.

Answer 12

User-6180675 posted

public string ok(string HoursWorked, string government_num)

    {

        decimal p1 = 0.0M;

        decimal p2 = 0.0M;

        Decimal.TryParse(HoursWorked, out p1);

        Decimal.TryParse(dutyhours, out p2);

        if (p2 > 0)

        {

            return (p1 - p2).ToString("N2");

        }

        return String.Empty; // or whatever default you want to show in your page

    }

Check with this code

protected void GridView2_SelectedIndexChanged(object sender, GridViewRowEventArgs e)
        {
            double ot;
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Literal lt = (Literal)e.Row.Cells[15].FindControl("Literal4");
               
                if (Double.TryParse(lt.Text, out ot))
                {
                    if (ot > 1 && ot < 3)

                        e.Row.Cells[15].BackColor = System.Drawing.Color.Green; // change the entire row backcolor instead of the  column 
                    else if (ot > 4)

                        e.Row.Cells[15].BackColor = System.Drawing.Color.Red;
                }

               
            }
        }

Answer 13

User-47788187 posted

Hi,

How to bring total from this OT column. also in total we need to exclude the negative values?