On of the useful things you can do with GridViews in ASP.NET is to run code during the rendering of each individual row. This allows you to change aspects, such as visual appearance, of each row based on the values of the cells. For instance, you can change the background color of the cell based on the value:
To accomplish this, you simply need to add a function to the “RowDataBound” attribute of the GridView.
[csharp]
GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);
void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int value = (int)DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text);
// e.Row.Cells[2] references the cell value you want to use
if (value < 100)
{
e.Row.Cells[2].BackColor = Color.FromName("#c6efce");
}
if ((value >= 100) && (value < 500))
{
e.Row.Cells[2].BackColor = Color.FromName("#ffeb9c");
}
if (value >= 500)
{
e.Row.Cells[2].BackColor = Color.FromName(“#ffc7ce”);
}
}
}
[/csharp]
In this example, I took the value of the 3rd cell of the row (“e.Row.Cells[2]”) and changed the background color of the cell based on the value.
How would you code the page if you were using a String value in the Column cell?
string value = DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text);
if (value == “some string”)
{
}
You might have to add ToString() at the end if it doesn’t work automatically: string value = DataBinder.Eval(e.Row.DataItem, e.Row.Cells[2].Text).ToString();
Thanks! I will try it out.
Nice job of presenting a very useful feature. I code in VB and have figured the differences for all the code except what you show in your line 01.
I’m not sure where I would put that line in my code-behind or if in VB I even need it. I have the rest of the code written and it proves to be ok but I get the following error whenever I run the code. System.Data.DataRowView does not contain a property with the name ‘RfS’. “RfS” is the text that is in the cell that the code should be setting the format for.
The only consideration that I can see that might make a difference is that the DataSource for the GridView is created and assigned with a DataTable at the Page_Load of this page.
Any ideas would sure be appreciated.
Thanks again for your sample.
we have the same problem.. anybody got the solution
Good post.. but its from server-side, isn’t it.
You can do it in client side and reduce the weight on server
its too easy with JavaScript. I found this in a blog site
http://howsharepoint.blogspot.com/2011/09/javascript-to-color-gridview-cells.html
Yes, this is from the server side. You could go either way, depends on the needs at hand. Doing it on the client side requires additional scripts to load and run in the web browser, whereas a server-side solution does it before its sent to the client.
Very informative post. It’s really helpful for me and helped me lot to complete my task.
Thanks for sharing with us. I had found another nice post over the internet which was
also explained very well about GridView Decoration in ASP.Net, for
more details of this post check out this link…
http://mindstick.com/Articles/0efe2da6-407e-4442-a675-475bd6f8a2d7/?GridView%20Decoration%20in%20ASP.Net
Thanks
THANKS A LOT, IT HELPS A MORE.
Narendran
Tweet me @MyNaren
Hi,
I was trying to implement this example in my project and have some problems. Could you please help me by any chance? I am using the datasource and databind method to fill my gridview with data. Does it mean I can’t use your technique?
my code is:
…
dapter.Fill(ds, “projects”);
grdProjects.DataSource = ds;
grdProjects.DataBind();
grdProjects.RowDataBound += new GridViewRowEventHandler(grdProjects_RowDataBound);
con.Close();
but the grdProjects_RowDataBound is not being fired
Any idea why?
Thanks,
Bartosz
I have something similar working for text forecolor.. But it doesnt seem to work on iPhone. Has anyone else noticed the problem? iPad seems fine.
Cheers
How coulld I change the cell background if the value is string. Example column ‘Priority’ and the value for each row is high, medium, and low. If ‘high’ the cell background is blue. if ‘red’ the cell background is ‘bleu’ and if it is ‘low’ the cell background is white.. anybody can help.
protected void Gdvcomplainview_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int PendingDate = (int)DataBinder.Eval(e.Row.DataItem, e.Row.Cells[5].Text);
if (PendingDate > 10)
{
e.Row.Cells[5].BackColor = Color.Red;
}
}
}
int PendingDate = (int)DataBinder.Eval(e.Row.DataItem, e.Row.Cells[5].Text);
this line gives an error. please help..
‘value cannot be null. parameter name expression’
this code is not working when we use paging in gridview…
Any Idea how it works with paging?