Change color of text in ASP.NET table cell (according to value)
Question
could you please help me with this: I am creating a table of some items with their properties and values (over some time). Looks like:
I want to change color of those values, lets say 0 will be green 1 blue 2 red.
DataView dv = new DataView(grid);
myGridView.DataSource = dv;
myGridView.DataBind();
If I need to be more specific, please tell me, I am not a PRO. I don't know where can I control the cell. I'd also like to add mouse over the text (so it will show the date of occurrence of current value). Maybe some function/javascript...?
3 answers
solution1
0 2016-06-06 09:32:20
您可以使用带有OnRowDataBound属性的gridview控件将特定的属性绑定到每个单元格/行。
solution2
0 2016-06-06 10:02:20
Use OnRowDataBound Event of gridview,here is sample
protected void GridCompany_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (GridViewRow gridViewRow in GridCompany.Rows)
{
if (gridViewRow.RowType == DataControlRowType.DataRow)
{
if (gridViewRow.Cells[6].Text.ToUpper() == "TRUE")// find your cell value and check for condition
{
// put here your logic
}
else
{
// put here your Else logic
}
}
}
}
solution3
0 ACCPTED 2016-06-06 12:28:13
Very simple and light weight solution using jQuery:
Code behind:
public partial class GridViewCellColourChange : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
gvItems.DataSource = this.GetData();
gvItems.DataBind();
}
}
private IEnumerable<Item> GetData()
{
var item1 = new Item { item = "itm1", prop1 = "23", prop2 = "asd", prop3 = "23d", values = "0-0-0-0-0" };
var item2 = new Item { item = "itm2", prop1 = "43", prop2 = "asd", prop3 = "23d", values = "0-0-0-0-0" };
var item3 = new Item { item = "itm3", prop1 = "53", prop2 = "asd", prop3 = "23d", values = "0-0-0-0-0" };
return new List<Item> { item1, item2, item3 };
}
}
public class Item
{
public string item { get; set; }
public string prop1 { get; set; }
public string prop2 { get; set; }
public string prop3 { get; set; }
public string values { get; set; }
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function () {
$("#gvItems > tbody > tr").each(function (i, row) {
var children = $(row).children();
for(var i=0; i < children.length;i++)
{
var child = children[i];
if(child.localName == "td")
{
var text = $(child).text();
if(text == "23")
{
$(child).css("background-color", "red");
}
else if(text == "43")
{
$(child).css("background-color", "green");
}
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvItems" runat="server"></asp:GridView>
</div>
</form>
</body>
Output:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.