Set Gridview Backcolor to Color from Datatable

Set gridview backcolor to color from datatable?

You can check the value of each cell in the RowDataBound event and color the cell based on it's value.

protected void GridViewClicks_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //check if the current row is a datarow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //loop all the cells in the row
        foreach (TableCell cell in e.Row.Cells)
        {
            //check if the color is hex or a string
            if (cell.Text.Contains("#"))
            {
                cell.BackColor = ColorTranslator.FromHtml(cell.Text);
            }
            else
            {
                cell.BackColor = Color.FromName(cell.Text);
            }
        }
    }
}

Change gridview's row color ASP.NET

One example in the code

protected void MergeGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (e.Row.RowIndex == 0) //Select the row
        {
            e.Row.BackColor = System.Drawing.Color.FromArgb(255, 0, 0);

            //or you can select the color
            //e.Row.BackColor = System.Drawing.Color.Red;
        }
    }
}

I hope help you.

Set Gridview Row Background Color using value in Binding DataSet

Create GridView1_RowDataBound event for your GridView.

if (e.Row.RowType == DataControlRowType.DataRow)
{
    //Check your condition here
    //Get Id from here and based on Id check value in the 
    //underlying dataSource Row where you have "DONE" column value
    // e.g.
    // (gridview.DataSource as DataTable), now you can find your row and cell 
    // of "Done"
    If(Condition True)
    {
        e.Row.BackColor = Drawing.Color.Red;  // your color settings 
    }
}

example code snippet:

protected void EmployeeAvailabilityGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            try
            {
               if (e.Row.RowType == DataControlRowType.DataRow)
                {                  
                    if(Convert.ToBoolean(DataBinder.Eval(e.Row.DataItem, "DONE")))
                    {
                        e.Row.BackColor = System.Drawing.Color.LightPink;
                    }
                }
            }
            catch (Exception ex)
            {
                //ErrorLabel.Text = ex.Message;
            }
        }

Refer following link for more detailed implementation:

Change GridView row color based on condition

Note: If that row does not exist in DataSource then you must have some logic to get that from other place. May be you have ID as Foreign Key in another table.

How to set the background color of a column in gridview of WPF

You could create a converter class

public class ErrorConverters : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      SolidColorBrush myBrush = default(SolidColorBrush);

      if ((bool)value == true)
      {
        myBrush = new SolidColorBrush(Colors.Red);
      }
      else
      {
        myBrush = new SolidColorBrush(Colors.Black);
      }

      return myBrush;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      //Throw New NotImplementedException()
      return null;
    }
  }

Then using a row template bind the back color to whatever item in your database would be passed to the converter.

Conditionally change row color on GridView

You don't need to loop through the table, the values for the cells in the row are given to you in the even arguments.

if (e.Row.RowType == DataControlRowType.DataRow)
{
    //Change the number here to refer to the column you are checking
    if(string.IsNullOrEmpty(e.Row.Cells[1].Text))
    {
        e.Row.BackColor = Color.Gray;
    }
}

However, as pointed out by @im1dermike in the comments, it's much preferable to use CSS to achieve the colouring. So create a new CSS class for the colour:

.case-closed { background-color: gray; }

And instead of setting the colour in code, just set the CSS class:

e.Row.CssClass = "case-closed";

DataGridView changing cell background color

I finally managed to get it working. Here the code :

private void dgvStatus_CellFormatting(object sender, DataGridViewCellFormattingEventArgs e)
{
    if (e.ColumnIndex != color.Index)
        return;

    e.CellStyle.BackColor = Color.FromArgb(int.Parse(((DataRowView)dgvStatus.Rows[e.RowIndex].DataBoundItem).Row[4].ToString()));
}

if anyone know a better to do this please don't hesitate to post it. I'm open to suggestion

Change GridView Cells colour if the cells have the Random number generated every 3 seconds in asp.net

Well, when you post-back, even in a update panel, the web page travels up to the server. The code behind runs - all of it. WHILE that code runs, the web page is up on the server. ANY change of a control is NOT seen by the user (they have a copy of the web page just sitting on their desktop).

The user ONLY will see ANY updates from your code behind ONLY AFTER the code is 100% done, finished and exits. When the code exists, then the WHOLE page (or update panel ) now travels back down to the client side, and is updated.

So, clearly, any code behind updates - ALL OF them will appear to occur in "one shot" or "one update".

A basic grasp of how web pages work is required here.

You have this:

NOTE SUPER careful in the above - note how NO WEB page is active on the web server side.

You do NOT have this setup:

And you do NOT have this setup:

so, you JUST have a web page sitting on the client side.

If the user clicks a button, or even a button in a update panel, then that post-back starts, you have this:

The page is sent to the web server (it is just sitting there - waiting for ANY user to post back a page - NOT JUST YOUR page!!!!

So, page travels up to web server.

You now have this:

Now, to be fair, in above a copy of the web page is ALSO still sitting on the users desktop - but they see the little spinner - page is waiting for ALL OF AND 100% of the code behind to finish.

You in fact NEVER directly interact with the user with code behind.

Your server side code ONLY interacts with the web page - and for the SHORT time the page is up on the server.

While the code behind runs, you are updating the copy of the browswer on the server side - any chances cannot be seen by the user. In fact, in most cases the order in which you update things don't matter, since ALL of the changes will have to complete.

Once and ONLY once your code behind is done running, then the whole page (or the udpate panel) now travels back to the client side browser, page loads, JavaScript starts to run, and NOW you see the updates from your code behind.

So, they will ALWAYS appear to update in one shot - not control by control.

And EVEN if you put delays in your code - all you will accomplish is to delay the page sitting up on the server for a LONGER period of time - but no updates will be seen client side.

So, after the updates occur (all code behind is done running), then, and only then does the page travel back to the client side, like this:

At that point, the server TOSSES out your web page, destryos the page class, and even all your code varaibles now go out of scope. Very much like when you exit a subroutine call - the local vars and values of that sub (or now the web page) go out of scope.

The web server is now just sitting waiting for ANY user to post back a page (or partial post back via a udpate panel - but the process is the same either way).

So, as a result, you can't put in code delays.

Your have to let the code behind finish.

So, if you want the user to "see" the page update (the squares in your case), then you have to use one of serveral appraoches:

One way:

You put in a JavaScript timer, and have it click a update button (even a hidden one) in the update paneal. Each time you click (say every half second), then you update one square in code behind, and then the update panel will show those results).

Another way is to have a JavaScript timer, it calls a JavaScript routin every second (or maybe half secord, or whatever).

That js routine will thus call a server side web method, get the value back of ONE control or text box, and the update it. This is typically referred to a ajax call.

This can be a complex bit of code. Worse yet, your squares to update are nested in a gridview, making the js code even more diffiuclt.

The most easy way?

Setup a code behind routine, use a session() counter (or view state).

Drop in a timer control into the update panel.

Have the timer control call your update to the grid routine, have it call it say once ever second. When the timer routine triggers, you update 1 box, increment the counter (to update the next box), and code behind exits.

So, you have to setup a routine that can modify ONLY ONE of the text boxes, and exit. You also need some counter that increments.

So for each timer trigger, your timer code calls the udpate routine - updates one text box, increment counter, and is done.

When the timer code figures out you JUST updated the last box, then the timer event can turn off the timer trigger, and the refreshing of the page will stop.

A REALLY simple example would be to have a text box count from 1 to 10, and update each time.

If we just run a for/next loop, put 1 to 10 in the text box, when the user clicks the button, the code can run, shove 1, then 2 etc into the text box. but due to the post-back and round trip diagrams above, the user will ONLY ever see "10" as the final result.

So, lets do the 1 to 10, use a update panel, and a simple text box.

So, we have this markup:

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="txtCount" runat="server" 
                    Height="42px"
                    Width="42px"
                    Font-Size="XX-Large"
                    Text="0"
                    style="text-align: center">
                </asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Start Timer"  CssClass="btn" OnClick="Button1_Click"/>

                <asp:Timer ID="Timer1" runat="server" 
                 Enabled="False" 
                 Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
            </ContentTemplate>

        </asp:UpdatePanel>

And our code behind can be this:

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Session["MyCount"] = 0;
        Timer1.Interval = 1000; // tick our timer each second
        Timer1.Enabled = true;
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        int? MyCount = Session["MyCount"] as int?;

        if (MyCount < 10 )
        {
            MyCount = MyCount + 1;
            txtCount.Text = MyCount.ToString();
            Session["MyCount"] = MyCount;
        }
        else
        {
            // we are done, stop the timer
            Timer1.Enabled = false;
        }
    }

And we now see/have this:

So, I suggest you try this on a test page. Drop in that text box, the timer, and the update panel.

Note that if you JUST runt he loop one to 10 in code behind (without the timer), then the code does run, does udpate the text box (1 to 10), but you NEVER see the results, since you just have to refer to the above post-back diagrams to grasp how this works.

So, you need to "run" that code you have to create the new values, but you need a timer, a counter of some time, and each time you increment the timer, you update ONE box in the grid, and then each time the timer fires, you then have to update another box.

When the counter has updated all of teh new changes, then your code behind can set the timer enabled = false to stop this updating process.

---

Related Topics