GridView Row Fading Effect

Introduction

In any application, it is always a good idea to give the user visual indication while some operation is in progress. In this article, I will describe how to give visual indication while the user is performing operations on a selected row.

Populating the GridView control

The first task is to populate the GridView control. Take a look at the code below, which is used to populate the GridView.

private void BindData()
{
    SqlConnection myConnection = 
        new SqlConnection(
        "Server=localhost;Database=Northwind;Trusted_Connection=true");
    SqlDataAdapter ad = 
        new SqlDataAdapter("SELECT * FROM Categories", myConnection);
    DataSet ds = new DataSet();
    ad.Fill(ds);
    gvCategories.DataSource = ds;
    gvCategories.DataBind();
}

The HTML code for the GridView looks like the following:

<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField Visible="true">
            <ItemTemplate>
                <div id="categoryID"><%# Eval("CategoryID") %></div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Literal ID="litCategoryName" 
                    runat="server" Text='<%# Eval("CategoryName") 
                    %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <input type="button" value="Save" onclick="Save(this)" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <div id="message" ></div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

The important thing to note is that when the button inside the Template Column is clicked, the Save(this) method is called. Let's take a look at the Save method.

The Save method

The Save method is responsible for creating the fading effect. Let's take a look at the Save method and then we will discuss how it is implemented.

function Save(obj)
{
    var row = null;
    if(IsFireFox())
    {
        row = obj.parentNode.parentNode;
    }
    else
    {
        row = obj.parentElement.parentElement;
    }
    var message = row.getElementsByTagName("DIV"); 
    row.style.backgroundColor = 'Yellow'; 
    message[1].innerHTML = 'Saving!'; 
    // Here you can also call the server side method 
    // to save the item to the database
    window.setTimeout(function() 
    { 
        row.style.backgroundColor = 'White'; 
        message[1].innerHTML = 'Saved!'; 
    }, 2000); 
}

The first task is to get the row object of the GridView which was clicked. After getting the row object, I find all of the DIV elements contained in the row. The DIV elements are retrieved so that I can display the message while the row is being saved. The heart of the fading function is the window.setTimeOut method, which is fired after 2000 milliseconds or 2 seconds. Instead of creating an actual method, I am passing an anonymous method to the window.setTimeout function.

window.setTimeout(function() 
{ 
    row.style.backgroundColor = 'White'; 
    message[1].innerHTML = 'Saved!'; 
}, 2000);

You can view the live animation of the effect using the URL given below:

<a href="http://gridviewguy.com/ArticleDetails.aspx?articleID=241"></a>

History

• 6 July, 2007 -- Original version posted