How to blink GridView Row based on some condition in ASP.Net using jQuery

vipsgenius
 
on Jun 26, 2014 04:01 AM
7496 Views

I have to write this code to blink particular rows of gridview based on some conditions I found below link which actually does blink but after we click the row..

http://forums.asp.net/p/1375904/3287108.aspx

I need that the row should blink as soon as the web page loads.

I also tried using the jquery as in below link but it is also giving error as

0x800a1391 - JavaScript runtime error: '$' is undefined

http://www.aspmemo.net/2012/03/gridview-rows-blink-using-jquery-in.html

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Mudassar
 
on Jun 26, 2014 06:44 AM

Try this

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .blink
        {
            background-color: Red;
            text-decoration: blink;
        }
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            <asp:TemplateField HeaderText="Salary" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:TextBox ID="txtSalary" runat="server" Text='<%# Eval("Salary") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var intervals = new Array();
        $(function () {
            $("[id*=GridView] [id*=txtSalary]").each(function () {
                var salary = parseInt($(this).val());
                intervals.push(null);
                if (isNaN(salary) || salary <= 0) {
                    SetBlink($(this));
                }
            });
            $("[id*=GridView] [id*=txtSalary]").bind("change", function () {
                var salary = parseInt($(this).val());
                if (isNaN(salary) || salary <= 0 || salary.toString() != $(this).val()) {
                    SetBlink($(this));
                } else {
                    RemoveBlink($(this));
                }
            });
        });
        function SetBlink(txt) {
            var tds = txt.closest("tr").find("td");
            var index = txt.closest("tr")[0].rowIndex - 1;
            if (intervals[index] == null) {
                var interval = setInterval(function () {
                    if (tds.hasClass("blink")) {
                        tds.removeClass("blink");
                    } else {
                        tds.addClass("blink");
                    }
                }, 500);
                intervals[index] = interval;
            }
        }
        function RemoveBlink(txt) {
            var index = txt.closest("tr")[0].rowIndex - 1;
            txt.closest("tr").find("td").removeClass("blink");
            clearInterval(intervals[index]);
            intervals[index] = null;
        }
    </script>
    </form>
</body>
</html>

 Namespace

using System.Data;

 C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary"), });
        dt.Rows.Add("John Hammond", "United States", 10000);
        dt.Rows.Add("Mudassar Khan", "India", 12000);
        dt.Rows.Add("Suzanne Mathews", "France", 0);
        dt.Rows.Add("Robert Schidner", "Russia", 19000);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Screenshot