I have a gridview that sits in a fixed height panel. If there are more items, then it scrolls. I have a checkbox and an asp textbox that both do some autopostback work. The problem I have, is if you scroll and then enter text in the box or check the checkbox,
the div scrolls back to the top. I tried writing some custom JS to do this but have been at it for a couple hours with no luck. Does anyone have any ideas about how to do this? Please note I can not use the Webforms.PageRequestManager object. Here's what my
gridview looks like. I'm trying to set the scroll position of the div to the specific panel called scrollHolder. I know how to pass the client id of that div to JS, I just don't know how to calculate the scroll. Thanks,
This jQuery plugin looks promising: http://code.google.com/p/m-jq-projects/downloads/detail?name=restoreScrollPosition-1.0.jquery.min.js&can=2 (be sure to read the wiki).
Try this approach. Enclose the Gridview in a Div and then write the Onscroll function for it. Calculate the value when scrolled in a Hidden field and Retrieve it after postback. The code look like this..
Ok people, I finally got it. Here's what I did. I created a colum to store the scroll position. I tried using a session variable, but it was acting funny. Then, you create a JS function to handle the scroller. I used some ajax code to call a seperate file
that stores this scroll position in the database
function setScrollPosition() {
var s = document.getElementById("tracks").scrollTop; sendAjaxRequest(s);
} //setScrollPosition
var ajaxRequest; // Script block to ping the server and get an AJAX request. function sendAjaxRequest(amount) { ajaxRequest = new XMLHttpRequest(); ajaxRequest.onreadystatechange = HandleResponse; ajaxRequest.open("GET", "SessionManager.aspx?scroll="+amount, true); ajaxRequest.send(null); }
//Function which handles the AJAX response.!!! Sandeep function HandleResponse() { if (ajaxRequest != undefined && ajaxRequest != null) {
function setPosition(amount) { document.getElementById('tracks').scrollTop = amount;
}//setPosition
Then call it in your code behind in the page load
//select all of the data for this sale String sql = "SELECT scrollPos FROM ScrollPos"; using (SqlConnection myconn = new SqlConnection(conn)) { myconn.Open(); SqlCommand cmd = new SqlCommand(sql, myconn); SqlDataReader reader = cmd.ExecuteReader(); while (reader.Read()) { ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "scroller", "<script type=\"text/javascript\">setPosition('" + reader["scrollPos"] + "');</script>", false); }//while reader.read
}//using
I hope this helps someone.
Marked as answer by Allen Li - MSFT on Jan 12, 2012 08:10 AM
<div>i think achor can be the easiest way to be solve this</div> <div>look at this article for further explanation what is an "anchor" </div> <div>http://www.hypergurl.com/anchors.html</div>
Please mark this reply as answer if it helps you. Thanks!HARVEY VASQUEZ Developer and Application Engineer
mandrews1234
Member
335 Points
579 Posts
Scroll to specific spot in gridview
Jan 06, 2012 06:36 PM|LINK
I have a gridview that sits in a fixed height panel. If there are more items, then it scrolls. I have a checkbox and an asp textbox that both do some autopostback work. The problem I have, is if you scroll and then enter text in the box or check the checkbox, the div scrolls back to the top. I tried writing some custom JS to do this but have been at it for a couple hours with no luck. Does anyone have any ideas about how to do this? Please note I can not use the Webforms.PageRequestManager object. Here's what my gridview looks like. I'm trying to set the scroll position of the div to the specific panel called scrollHolder. I know how to pass the client id of that div to JS, I just don't know how to calculate the scroll. Thanks,
<asp:panel id="tracks" runat="server" class="tracksClass"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TrackId" BorderStyle="None" GridLines="None" CellPadding="5" RowStyle-HorizontalAlign="Center" Width="210px" > <RowStyle CssClass="myRow" Height="130px" /> <FooterStyle CssClass="noRow" /> <Columns> <asp:TemplateField HeaderText=""> <ItemTemplate> <asp:Panel ID="scrollHolder" runat="server"></asp:Panel> <asp:CheckBox ID="soldCheck" runat="server" OnCheckedChanged="checkSoldChecked" AutoPostBack="true" CssClass="trackCheckBox" /> <asp:Label ID="trackOutput" runat="server" Text='<%# Eval("trackText") %>'></asp:Label> <asp:label ID="dollarSign" runat="server" Text="$ " CssClass="trackText"></asp:label> <asp:TextBox ID="perAcreInput" runat="server" OnTextChanged="acrePriceChange" AutoPostBack="true" CssClass="acreTextBox" ></asp:TextBox><asp:Label ID="acreTextLabel" class="trackText" runat="server" > / acre</asp:Label><br /> <asp:Label ID="totalCost" runat="server" Text="$0" CssClass="trackText"></asp:Label> <asp:Label Visible="false" ID="myTrackId" runat="server" Text='<%# Eval("TrackId") %>'></asp:Label> <asp:Label Visible="false" ID="acresHolder" runat="server" Text='<%# Eval("acres") %>'></asp:Label> <asp:Label Visible="false" ID="ownersHolder" runat="server" Text='<%# Eval("owners") %>'></asp:Label> <asp:Panel ID="soldPanel" CssClass="soldPanelClass" Visible="False" runat="server"> <img src="images/sold.png" /> </asp:Panel> <div id='soldDiv<%# Eval("TrackId") %>' class="soldPanelClass" style="visibility: hidden;"> <img src="images/sold.png" /> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </asp:Panel>MetalAsp.Net
All-Star
112754 Points
18375 Posts
Moderator
Re: Scroll to specific spot in gridview
Jan 06, 2012 06:57 PM|LINK
Allen Li - M...
Star
10411 Points
1196 Posts
Re: Scroll to specific spot in gridview
Jan 09, 2012 11:06 AM|LINK
Hi, to access the client id of web controls, we can use the following method:
You can try the following method to store the panel scrollbar position and retrieve them when the page is posted back.
protected void Page_Load(object sender, EventArgs e) { HandlePanelScrolBar(); } private void HandlePanelScrolBar() { HiddenField HF_ScrollPosX = new HiddenField(); HiddenField HF_ScrollPosY = new HiddenField(); HF_ScrollPosX.ID = "ScrollPosX"; HF_ScrollPosY.ID = "ScrollPosY"; form1.Controls.Add(HF_ScrollPosX); form1.Controls.Add(HF_ScrollPosY); string script; script = "window.document.getElementById('" + HF_ScrollPosX.ClientID + "').value = " + "window.document.getElementById('" + Panel1.ClientID + "').scrollLeft;" + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value = " + "window.document.getElementById('" + Panel1.ClientID + "').scrollTop;"; this.ClientScript.RegisterOnSubmitStatement(this.GetType(), "SavePanelScroll", script); if (IsPostBack) { script = "window.document.getElementById('" + Panel1.ClientID + "').scrollLeft = " + "window.document.getElementById('" + HF_ScrollPosX.ClientID + "').value;" + "window.document.getElementById('" + Panel1.ClientID + "').scrollTop = " + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value;"; this.ClientScript.RegisterStartupScript(this.GetType(), "SetPanelScroll", script, true); } }Please change “Panel1”to your Panel ID.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework
mandrews1234
Member
335 Points
579 Posts
Re: Scroll to specific spot in gridview
Jan 09, 2012 06:41 PM|LINK
I tried your code in my site but don't seem to get it to work any ideas why? I don't see any errors from the JS console. Here's what I have
<asp:Panel id="tracks" runat="server" class="tracksClass"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TrackId" BorderStyle="None" GridLines="None" CellPadding="5" RowStyle-HorizontalAlign="Center" Width="210px" > <RowStyle CssClass="myRow" Height="130px" /> <FooterStyle CssClass="noRow" /> <Columns> <asp:TemplateField HeaderText=""> <ItemTemplate> <asp:CheckBox ID="soldCheck" runat="server" OnCheckedChanged="checkSoldChecked" AutoPostBack="true" CssClass="trackCheckBox" /> <asp:Label ID="trackOutput" runat="server" Text='<%# Eval("trackText") %>'></asp:Label> <asp:label ID="dollarSign" runat="server" Text="$ " CssClass="trackText"></asp:label> <asp:TextBox ID="perAcreInput" runat="server" OnTextChanged="acrePriceChange" AutoPostBack="true" CssClass="acreTextBox" ></asp:TextBox><asp:Label ID="acreTextLabel" class="trackText" runat="server" > / acre</asp:Label><br /> <asp:Label ID="totalCost" runat="server" Text="$0" CssClass="trackText"></asp:Label> <asp:Label Visible="false" ID="myTrackId" runat="server" Text='<%# Eval("TrackId") %>'></asp:Label> <asp:Label Visible="false" ID="acresHolder" runat="server" Text='<%# Eval("acres") %>'></asp:Label> <asp:Label Visible="false" ID="ownersHolder" runat="server" Text='<%# Eval("owners") %>'></asp:Label> <asp:Label Visible="false" ID="scrollHolder" runat="server" Text='<%# Eval("scroll") %>'></asp:Label> <asp:Panel ID="soldPanel" CssClass="soldPanelClass" Visible="False" runat="server"> <img src="images/sold.png" /> </asp:Panel> <div id='soldDiv<%# Eval("TrackId") %>' class="soldPanelClass" style="visibility: hidden;"> <img src="images/sold.png" /> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </asp:Panel>protected void Page_Load(object sender, EventArgs e) { //set the scroll of the tracks div HandlePanelScrolBar();private void HandlePanelScrolBar() { HiddenField HF_ScrollPosX = new HiddenField(); HiddenField HF_ScrollPosY = new HiddenField(); HF_ScrollPosX.ID = "ScrollPosX"; HF_ScrollPosY.ID = "ScrollPosY"; form1.Controls.Add(HF_ScrollPosX); form1.Controls.Add(HF_ScrollPosY); string script; script = "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value = " + "window.document.getElementById('" + tracks.ClientID + "').scrollLeft;" + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value = " + "window.document.getElementById('" + tracks.ClientID + "').scrollTop;"; this.ClientScript.RegisterOnSubmitStatement(this.GetType(), "SavePanelScroll", script); if (IsPostBack) { script = "window.document.getElementById('" + tracks.ClientID + "').scrollLeft = " + "window.document.getElementById('" + HF_ScrollPosX.ClientID + "').value;" + "window.document.getElementById('" + tracks.ClientID + "').scrollTop = " + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value;"; this.ClientScript.RegisterStartupScript(this.GetType(), "SetPanelScroll", script, true); } }//HandlePanelScrolBarsushanth009
Contributor
6243 Points
1168 Posts
Re: Scroll to specific spot in gridview
Jan 09, 2012 09:00 PM|LINK
Try this approach. Enclose the Gridview in a Div and then write the Onscroll function for it. Calculate the value when scrolled in a Hidden field and Retrieve it after postback. The code look like this..
<input type="hidden" id="hdnScrollTop" runat="server" value="0" /> <asp:Panel id="tracks" runat="server" class="tracksClass"> <div id="divScroll" style="height: 555px; width: 100%; overflow-y: scroll; overflow-x: hidden;" onscroll="$get('<%= this.hdnScrollTop.ClientID %>').value = this.scrollTop;"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" > </asp:Gridview> </asp:Panel><script type="text/javascript"> function pageLoaded(sender, args) { if (postbackElement.id.toLowerCase().indexOf('gridview1') > -1) { $get("divScroll").scrollTop = $get('<%= this.hdnScrollTop.ClientID %>').value; } </script>Try and see if this approach works for you..
mandrews1234
Member
335 Points
579 Posts
Re: Scroll to specific spot in gridview
Jan 09, 2012 09:04 PM|LINK
Ok people, I finally got it. Here's what I did. I created a colum to store the scroll position. I tried using a session variable, but it was acting funny. Then, you create a JS function to handle the scroller. I used some ajax code to call a seperate file that stores this scroll position in the database
function setScrollPosition() {
var s = document.getElementById("tracks").scrollTop;
sendAjaxRequest(s);
} //setScrollPosition
<div id="tracks" class="tracksClass" onscroll="setScrollPosition()">
...gridview here
</div>
Create this JS function
function setPosition(amount) {
document.getElementById('tracks').scrollTop = amount;
}//setPosition
harveyvasque...
Member
478 Points
144 Posts
Re: Scroll to specific spot in gridview
Jan 10, 2012 01:56 AM|LINK
asteranup
All-Star
30184 Points
4906 Posts
Re: Scroll to specific spot in gridview
Jan 10, 2012 04:15 AM|LINK
Hi,
You can try someting like below-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript"> function setPosition() { document.PanelTop = document.getElementById('<%=Panel1.ClientID %>').scrollTop; } function pageLoad() { document.getElementById('<%=Panel1.ClientID %>').scrollTop = document.PanelTop; } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" Style="height: 200px;overflow:auto" onscroll="setPosition()"> <div style="height: 300px; width: 500px;"> <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" /> </div> <div style="height: 300px; width: 500px;"> <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button1_Click" /> </div> <div style="height: 300px; width: 500px;"> <asp:Button ID="Button3" runat="server" Text="Button3" OnClick="Button1_Click" /> </div> <div style="height: 300px; width: 500px;"> <asp:Button ID="Button4" runat="server" Text="Button4" OnClick="Button1_Click" /> </div> <div style="height: 300px; width: 500px;"> <asp:Button ID="Button5" runat="server" Text="Button5" OnClick="Button1_Click" /> </div> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog