How to apply scroll animations to grid view control
whenever new row is added then already existing row will be slowly move downword and new one will be added i开发者_如何学JAVAn the grid view control.
Check out the jQuery.ScrollTo plugin it works great for scrolling the screen slowly. Have some control below your grid it can be an existing control or you could add an anchor tag like
After you add your row you would add the script $.scrollTo('#grid_bottom') using ScriptManager.RegisterStartupScript or ClientScript.RegisterStartupScript (use the script manager one of you are using an update panel) and it should scroll down slowly.
Link to download page for jQuery ScrollTo Plugin
Here is some example code, you can change the duration in the ScrollTo function or leave it off, and the scroll will happen immediately without smoothly scrolling:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public List<KeyValuePair<string, string>> Items
{
get { return (List<KeyValuePair<string, string>>)ViewState["Items"]; }
set { ViewState["Items"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Items = new List<KeyValuePair<string, string>>();
for (int i = 0; i < 200; i++)
Items.Add(new KeyValuePair<string, string>(i.ToString(), "Test" + i));
GridTest.DataSource = Items;
GridTest.DataBind();
}
}
protected void cmdAddNew_Click(object sender, EventArgs e)
{
Items.Add(new KeyValuePair<string, string>("", DateTime.Now.ToString()));
GridTest.DataSource = Items;
GridTest.DataBind();
ScriptManager.RegisterStartupScript(this, GetType(), "scrollto",
string.Format(
@" $(document).ready(function(){{
$.scrollTo($('#{0}'), 2000);
}});", cmdAddNew.ClientID), true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1">
<Scripts>
<asp:ScriptReference Path="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js" />
<asp:ScriptReference Path="/JavaScript/jquery.scrollTo-min.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="pnlTest">
<ContentTemplate>
<asp:LinkButton ID="cmdAddNew2" runat="server" OnClick="cmdAddNew_Click">Add New</asp:LinkButton>
<asp:GridView ID="GridTest" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Value" />
</Columns>
</asp:GridView>
<asp:LinkButton ID="cmdAddNew" runat="server" OnClick="cmdAddNew_Click">Add New</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论