Saturday, March 24, 2012

Gridview rows blink using JQuery in asp.net

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".

3 comments:

  1. This post is really work for me!! thanks :)

    ReplyDelete
  2. it is giving error 0x800a1391 - JavaScript runtime error: '$' is undefined
    The gridId in the script section is GridView1 according to above example right? but still it is giving error..

    ReplyDelete
  3. Does not work in Chrome but ok in IE

    ReplyDelete