When I'm developing an application with .NET platform, I have a case that is a Gridview row blinking depend on the some column data every one second. I solved it out using JQuery and it is also a simple way by applying "setTimeout" javascript function as below.
 |
| Gridview Row Blinking |
 |
| Gridview Row Blinking |
Put the following style sheet to <head> tag.
<style type="text/css">
.bgRow
{
background-color: Green;
}
.norRow
{
background-color: Silver;
}
</style>
Add the following scripts to <head> tag.
<script src="yourUrl/jquery-1.4.1.min.js" type="text/javascript"></script> //it need for JQuery
<script type="text/javascript">
function setBG(gridId) {
var id = "#" + gridId;
$(id).find("tr").each(function () {
var css = $(this).attr("class");
if (css != null && css == "bgRow")
$(this).addClass("norRow").removeClass("bgRow");
else if (css != null && css == "norRow")
$(this).addClass("bgRow").removeClass("norRow");
});
setTimeout("setBG('" + gridId + "')", 1000); //1000 is equal to one second and call function every one second.
}
</script>
Create a Gridview as below. I used "Northwind" db and "Suppliers" table.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
AllowPaging="True" AlternatingRowStyle-Wrap="True" EmptyDataText="There is no data."
OnRowDataBound="GridView1_RowDataBound"
onpageindexchanging="GridView1_PageIndexChanging">
<Columns>
<asp:BoundField HeaderText="Supplier ID" DataField="SupplierID" />
<asp:BoundField HeaderText="Company Name" DataField="CompanyName" />
<asp:BoundField HeaderText="Address" DataField="Address" />
<asp:BoundField HeaderText="Country" DataField="Country" />
</Columns>
</asp:GridView>
Add the below code snippet to code-behind.
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!Page.IsPostBack)
{
using (var context = new NorthwindEntities())
{
//Data binding here. I used EF.
var suppliers = context.Suppliers.ToList();
GridView1.DataSource = suppliers;
GridView1.DataBind();
}
}
//Register javascript and call "setBG" function.
ClientScript.RegisterStartupScript(GetType(), "BG", "setBG('" + GridView1.ClientID + "')", true);
}
catch (Exception ex)
{
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string country = DataBinder.Eval(e.Row.DataItem, "Country").ToString();
if(country == "USA") //set the row background color on condition here.
e.Row.CssClass = "bgRow";
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
//handle for page index here
GridView1.PageIndex = e.NewPageIndex;
using (var context = new NorthwindEntities())
{
var suppliers = context.Suppliers.ToList();
GridView1.DataSource = suppliers;
GridView1.DataBind();
}
}
That's all what you have to do. You'll be glad you did.
Every row has blinking, when they have "Country" column is "USA".
This post is really work for me!! thanks :)
ReplyDeleteit is giving error 0x800a1391 - JavaScript runtime error: '$' is undefined
ReplyDeleteThe gridId in the script section is GridView1 according to above example right? but still it is giving error..
Does not work in Chrome but ok in IE
ReplyDelete