Gridview Select Row Question

G

GaryDean

I have a gridview with select buttons in a div with scrollbars. If I scroll
down enough to make the grid spin in the div and select a record, the grid
resets to the top making the user readjust the grid each time. How can I
make it stick where it was when they selected the row?
Thanks,
Gary
 
A

Allen Chen [MSFT]

Hi Gary,

To achieve the requirement we can store the scrollbar's scrollTop position
in a hidden field. Then restore the position on the page body's load.
Here's the code that demonstrates how to do this:

<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">

function Func()
{
document.getElementById("divScroll").scrollTop
=document.getElementById("hdnScrollTop").value;
}
function Func2()
{
var s=document.getElementById("divScroll").scrollTop;

document.getElementById('hdnScrollTop').value=s;
}
</script>


</head>
<body onload="Func()">
<form id="form1" runat="server">
<input type="hidden" id="hdnScrollTop" runat="server" value="0"/>
<div runat="server" id="divScroll" style="width:350px;height:200px;
overflow:scroll;" onscroll="Func2()">
<asp:GridView id="GridView1" runat="server" width="95%"
datasourceid="SqlDataSource1" cellpadding="3" GridLines="Horizontal">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
</div>
¡­

Please have a try and let me know if it works. If you have further
questions please feel free to ask.

Regards,
Allen Chen
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
 
A

Allen Chen [MSFT]

Hi Mark,

Thanks for pointing that out. Partial of the code is copied from one of my
old reserved file and I didn't note that.

Regards,
Allen Chen
Microsoft Online Support
 
G

GaryDean

Allen,
We only use javascript in our pages as a means of last resort (never used it
yet).
However, this may be an area where there is no alternative.

I'm not sure where to put the javascript as my pages are not structured with
<head> and <body> tags.

we use master pages and everything in the individual page is in a ...
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">.

where do I put the onload="Func()"> if there is no <body tag?
thanks,
Gary
 
A

Allen Chen [MSFT]

Hi Gary,

Thanks for your update. If you're using master page you can try following
code in the content page:

Contentpage.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
this.GridView1.DataSource = "HELLO WORLD!";
this.GridView1.DataBind();
StringBuilder sb=new StringBuilder();
sb.Append("<script type=\"text/javascript\">");
sb.Append("var divScroll=document.getElementById(\"");
sb.Append(this.divScroll.ClientID);
sb.Append("\");var hdnScrollTop=document.getElementById(\"");
sb.Append(this.hdnScrollTop.ClientID);
sb.Append(@"""); function Func()
{
divScroll.scrollTop=hdnScrollTop.value;
}
function Func2()
{
var s=divScroll.scrollTop;

hdnScrollTop.value=s;
}
</script>");
ClientScript.RegisterStartupScript(this.GetType(),"key0",
sb.ToString());
ClientScript.RegisterStartupScript(this.GetType(),"key1","<script
type=\"text/javascript\">Func()</script>");
}
}

ContentPage.aspx:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<input type="hidden" id="hdnScrollTop" runat="server" value="0"/>
<div runat="server" id="divScroll" style="width:350px;height:200px;
overflow:scroll;" onscroll="Func2()">
<asp:GridView id="GridView1" runat="server" cellpadding="3"
GridLines="Horizontal">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
</div>
</asp:Content>

The basic idea is same, that is to use JavaScript and the hidden input to
store the position of the scrollbar.

Please let me know if the above code works. If you have further questions
please feel free to ask.

Regards,
Allen Chen
Microsoft Online Community Support
 
G

GaryDean

I've got your code in my aspx file and the following is in my Load method
but I get an error on the reference to this.divScroll...

this.GridView1.DataSource = "HELLO WORLD!";
this.GridView1.DataBind();
StringBuilder sb=new StringBuilder();
sb.Append("<script type=\"text/javascript\">");
sb.Append("var divScroll=document.getElementById(\"");
sb.Append(this.divScroll.ClientID); <-----------------------no
definition for divScroll
sb.Append("\");var hdnScrollTop=document.getElementById(\"");
sb.Append(this.hdnScrollTop.ClientID);
sb.Append(@"""); function Func()
{
divScroll.scrollTop=hdnScrollTop.value;
}
function Func2()
{
var s=divScroll.scrollTop;

hdnScrollTop.value=s;
}
</script>");
ClientScript.RegisterStartupScript(this.GetType(),"key0",
sb.ToString());
ClientScript.RegisterStartupScript(this.GetType(),"key1","<script
type=\"text/javascript\">Func()</script>");
It says there is no definition for divScroll.
Gary
 
G

GaryDean

Allen, Please forget my other post. I decided it was simpler to use your
first example and just put the JavaScript into the aspx page. Using the
following code:
<script type="text/javascript" >

function Func()
{
document.getElementById("divScroll").scrollTop
=document.getElementById("hdnScrollTop").value;
}
function Func2()
{
var s=document.getElementById("divScroll").scrollTop; <----Getting
object required

document.getElementById('hdnScrollTop').value=s;
}
</script>

when I scroll the grid the first line of Func2() gets "object required"
error. The div and the hidden control are as follows:
<input type="hidden" id="hdnScrollTop" runat="server" value="0"/>

<DIV runat="server" id="divScroll" style="OVERFLOW: auto; WIDTH: 800px;
HEIGHT: 300px; border-right: thin solid; border-top: thin solid;
border-left: thin solid; border-bottom: thin solid;" onscroll="Func2()">

Do you see what might be wrong?
Thanks,
GAry
 
A

Allen Chen [MSFT]

Hi Gary,

Happy New Year!

I think maybe the client id of the div is not "divScroll". When the div is
set as runat="server" its client id may change due to many reasons such as
be put into a naming container. To see if it's the cause you can right
click the page when viewing it in IE. Then select "View Source" to see the
correct id if of this div.

If it's the cause you can directly use the correct id in the Javascript
instead. But a better way is to use its ClientID property. In my previous
post you can see the ClientID is used:

sb.Append(this.divScroll.ClientID);

If it still doesn't work you can send me a demo project that can reproduce
this problem. I'll test it and send back the working one. My email is
(e-mail address removed) update here after sending the project in case
I missed that email.

Regards,
Allen Chen
Microsoft Online Community Support
 
G

GaryDean

Allen,

I think we are making progress here. I looked at the source and my
divScroll and hdnScrollTop had prefixes as pasted below so I put it in the
code everywhere I referred to them. I hope that will not change.

I no longer get the "no object" error. However the grid still scrolls to
the top. I suspect that it is because func() never gets executed. When you
posted the message telling me how to put the javascript into a Content you
never had Func() called. I've tried it about eveywhere. I have no <body tag
Where does it go?

my code is below.
Thanks,
Gary

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server" >

<script type="text/javascript" >

function Func()
{
document.getElementById("ctl00_ContentPlaceHolder1_divScroll").scrollTop
=document.getElementById("ctl00_ContentPlaceHolder1_hdnScrollTop").value;
}
function Func2()
{
var
s=document.getElementById("ctl00_ContentPlaceHolder1_divScroll").scrollTop;

document.getElementById("ctl00_ContentPlaceHolder1_hdnScrollTop").value=s;
}
</script>

<input type="hidden" id="hdnScrollTop" runat="server" value="0"/>

<DIV runat="server" id="divScroll" style="OVERFLOW: auto; WIDTH: 800px;
HEIGHT: 300px; border-right: thin solid; border-top: thin solid;
border-left: thin solid; border-bottom: thin solid;" onscroll="Func2()">
 
A

Allen Chen [MSFT]

Hi Gary,

Thanks for your update. Now we can see it's indeed caused by the ClientID
issue. I think we can try following code:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">


<input type="hidden" id="hdnScrollTop" runat="server" value="0"/>

<div runat="server" id="divScroll" style="OVERFLOW: auto; WIDTH: 800px;
HEIGHT: 300px; border-right: thin solid; border-top: thin solid;
border-left: thin solid; border-bottom: thin solid;" onscroll="Func2()" >
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true"
AutoGenerateSelectButton="true">
</asp:GridView>
</div>

<script type="text/javascript" >

function Func()
{
document.getElementById('<%=divScroll.ClientID %>').scrollTop
=document.getElementById('<%=hdnScrollTop.ClientID %>').value;
}
function Func2()
{
var s=document.getElementById('<%=divScroll.ClientID %>').scrollTop;

document.getElementById('<%=hdnScrollTop.ClientID %>').value=s;
}

Func();

</script>
</asp:Content>

The call of Func() is put at the bottom. In addition, we can see this kind
of expressions is used in the inline code:

<%=divScroll.ClientID %>

It's used to get the ClientID and is identical to what I pasted in my
previous post that showed how to get the ClientID in the code behind. I
believe inline code is more straightforward to you so I used it here.

Since the ClientID may change due to many reasons it's not recommended to
hard code the ClientID in the JavaScript.

Please let me know if it works. If you have further questions please feel
free to ask.

Regards,
Allen Chen
Microsoft Online Community Support
 
G

GaryDean

Allen,
I have sent you an email with a zip of a simple project that demonstrates
the behavior of this code.

I'ts still not working but the project I emailed should lead us to a
conclusion. The subject of the email is the same as this thread subject.
 
A

Allen Chen [MSFT]

Hi Gary,

I've emailed you a sample. If you didn't receive it please let me know.


Regards,
Allen Chen
Microsoft Online Support
 
G

GaryDean

Allen,
I did not receive anything from you. Checked my spam filter too.
(e-mail address removed)
 
G

GaryDean

Allen,
Your example works great. Checking the difference between my non-working
sample and your working sample, you placed the javascript at the bottom of
the asp:Content and I placed mine at the top. Once I moved it, it worked
great.

unfortunitely it does not work in my complex page but I hope to figure that
out now that I have a working example.

So that others can benefit from your working solution I have pasted it
below.
Thanks,
Regards,
Gary Blakely
Dean Blakely & Associates
www.deanblakely.com

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2"
Title="Untitled Page" %>
<%@ MasterType TypeName="MasterPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">



<input type="hidden" id="hdnScrollTop" runat="server" value="0" />
<div runat="server" id="divScroll" style="width: 175px; height: 300px;
overflow: auto;" onscroll="Func2()" >
<asp:GridView ID="GridView1" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None">
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:CommandField ButtonType="Button"
ShowSelectButton="True" />
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True"
ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True"
ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True"
ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>

</div>
<script type="text/javascript" >

function Func()
{
document.getElementById('<%=divScroll.ClientID%>').scrollTop
=document.getElementById('<%=hdnScrollTop.ClientID%>').value;
}
function Func2()
{
var s=document.getElementById('<%=divScroll.ClientID%>').scrollTop;

document.getElementById('<%=hdnScrollTop.ClientID%>').value=s;
}
Func();
</script>
</asp:Content>
 
A

Allen Chen [MSFT]

Hi Gary,

You're welcome. If you find there's any difficulties to merge my code into
your solution please feel free to let me know.

Regards,
Allen Chen
Microsoft Online Community Support
 
G

GaryDean

I see my email to you with the attached example was rejected. I sent it to
(e-mail address removed). Is that a bad email address?
 
A

Allen Chen [MSFT]

Hi Gary,

Sorry for the inconvenience brought to you. Now my email has been changed
to (e-mail address removed). Please send your project to me again. I'll debug
it on my side and send a working project to you.

Regards,
Allen Chen
Microsoft Online Support
 
A

Allen Chen [MSFT]

Hi Gary,

Thanks for your code. I've sent you a working project. The main issue is,
the UpdatePanel is used. In this case, the JavaScript function Func() added
in the page cannot be called when the asynchronous response is back to the
client. To make it work with UpdatePanel we need to manually call the
Func() in the load after the async postback. Here's the key:

<script type="text/javascript" >
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
Func()
}
function Func()
{
document.getElementById('<%=divScroll.ClientID%>').scrollTop
=document.getElementById('<%=hdnScrollTop.ClientID%>').value;
}
function Func2()
{
var s=document.getElementById('<%=divScroll.ClientID%>').scrollTop;

document.getElementById('<%=hdnScrollTop.ClientID%>').value=s;
}
</script>

We use Sys.WebForms.PageRequestManager.getInstance() to get the page
request manager. Then hook an event handler to the async page load via
add_pageLoaded method. In the event handler we call the Func() to set the
position of the scrollbar.

Please try it to see if it works. If you need further assistance please
don't hesitate to let me know. I'll try my best to follow up.

Regards,
Allen Chen
Microsoft Online Community Support
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to re-select row in a gridview _after_ sorting? 1
Multi select options in a menu 1
GridView - After submit, want to keep selected row visible 1
Survey details won't go through using php, ajax, Mysql 0
Gallery - mosiac/grid layout with filtering and information page popup 1
Programmatically select a radio button contained in a gridview row 0
Gridview Row Select 2
How to auto-select a GridView row that is being edited? 1

Members online

Total: 34 (members: 2, guests: 32)
Robots: 359

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,071
Latest member
MetabolicSolutionsKeto

Latest Threads

Top