GridView Row Fading Effect Using JavaScript
GridView row fading is specially useful when you are performing operations on the single row. These operations can be save, update, delete etc. Let's check out how to create fading effects using JavaScript.
First I need to populate the GridView control.
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();
}
Easy enough!
Now, I need to create columns in the GridView control.
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False">
<Columns>
<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>
As, you can see the Save method is fired when I click the button.
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[0].innerHTML = 'Saving!';
window.setTimeout(function() { row.style.backgroundColor = 'White'; message[0].innerHTML = 'Saved!'; },2000);
}
function
IsFireFox()
{
return navigator.appName == 'Netscape';
}
The Save method simply gets the row and changes the color of the row to 'Yellow' and after 2 seconds it changes the color back to 'White'. I used anonymous JavaScript method inside the window.setTimeOut method. You can use a method call to the server which actually saves the item in the database.
Check out the effect below:
