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>

codeproject.com  

Posted in: .NET, GridView