[RESOLVED] Gridview & postback question

I have a gridview question that will most likely fall back to my basic lack of understanding of how ASP.NET works: Here goes:

I have a gridview connected to a MySQL database stored procedure using a SqlDataSource object and the gridview is in a panel so that I can scroll through the records returned by the stored procedure, selecting the record I want. I have connected a detailsview object to the same stored procedure and have tied the detailsview to the gridview with a GridView1_SelectedIndexChanged event.

This works, however, during the page postback to fill the detailsview object the gridview resets to selectedindex = 1.

Q1: How can I stop the gridview from resetting each time a record is selected?
Q2: Is the stored procedure being executed during each page postsback?
Q3: Is this the correct way to handle data in this situation, or should I be filling a datatable and binding to that…, or do datatables even work in ASP.NET like they do in a VB.NET windows app?

Thanks

Ok, one question at a time:

How can I keep my gridview, which is located in a panel with the scrollbar so that I can scroll through and select records, from resetting during postback?

Any shared advice is appreciated in advance

the panel is rendered as a <div> tag with with css style for layout (scroll).

You could try adding <&#37;@ Page Language="VB" MaintainScrollPositionOnPostback="true" at the top of your page.

This maintains the page scroll position when postback - it might do so for the div.... but I doubt it.

I googled div scroll position and got this http://radio.javaranch.com/pascarell...709316718.html - you'd have to rework it but the concept is there.

Are you handling the selectedindexchange event of the gridview? Show code.
The SP might be re-executed each time, but depends on the code.

Well, I have tried the JavaScript approach suggested by brin351 with no success. I am no wiz with the JavaScript, but it seamed straightforward except that the code is written for a Div container… and unless I am really missing something it appears that the Div container does not have scrollbars position property. Regardless, I tried to adapt this script for the asp: panel but this container does not have the Onscroll property and I could not find another event that would work. Here is the Java Script.

Code:

---

    <script type="text/javascript">
      window.onload = function(){
        var strCook = document.cookie;
        if(strCook.indexOf("!~")!=0){
          var intS = strCook.indexOf("!~");
          var intE = strCook.indexOf("~!");
          var strPos = strCook.substring(intS+2,intE);
          document.getElementById("panel1").scrollTop = strPos;
        }
      }
      function SetDivPosition(){
        var intY = document.getElementById("panel1").scrollTop;
        document.title = intY;
        document.cookie = "yPos=!~" + intY + "~!";
      }
    </script>

---

Here is where I try to call the javascript function:

Code:

---

<asp:Panel ID="Panel1" onscroll="javascript:SetDivPosition();" runat="server"  Style="z-index: 105; left: 56px;
            position: absolute; top: 360px" CssClass="panel1" ScrollBars="Vertical" EnableViewState="False">

---

This gives an error "attribute "onscroll" is not a valid attribute of asp: panel"


Regarding my handling of the selectedindexchange event, I do not now how to prevent the scrollbar from resetting or how to capture the scroll position property (if there is one). This would be great, but my research has turned up empty. This is not of much value

Code:

---

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

        Me.TextBox1.Text = CStr(Me.GridView1.SelectedIndex)
        Me.DetailsView1.PageIndex = Me.GridView1.SelectedIndex
        Me.FormView1.PageIndex = Me.GridView1.SelectedIndex

End Sub

---

The Panel is a "server control" which you can access in code on the server. How it is rendered on the client's browser is a <div> tag. If your only using a panel to make a scrolling box to hold the grid then just use a div tag. You can add runat="server" to any html tag to make it a server control if needed.

here is an example - try it and maybe it will be clearer.


HTML

Code:

---

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
      window.onload = function(){
        var strCook = document.cookie;
        if(strCook.indexOf("!~")!=0){
          var intS = strCook.indexOf("!~");
          var intE = strCook.indexOf("~!");
          var strPos = strCook.substring(intS+2,intE);
          document.getElementById("divTest").scrollTop = strPos;
        }
      }
      function SetDivPosition(){
        var intY = document.getElementById("divTest").scrollTop;
        document.title = intY;
        document.cookie = "yPos=!~" + intY + "~!";
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Scroll Div</h1>
        Retain scroll position of div<br />
        <br />
        Row selected :
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
       
    <!--NOTE the style on the div also can call client script-->   
    <div style="width:500px; height:200px; overflow:scroll;" runat="server" id="divTest" onscroll="SetDivPosition()">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateSelectButton="True">
        </asp:GridView>
    </div>
   
    </form>
</body>
</html>

---

vb code

Code:

---

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'bind some data to grid
        Dim a(100) As String

        Dim i As Integer
        For i = 0 To 100
            a(i) = i
        Next

        GridView1.DataSource = a
        GridView1.DataBind()


        If Not Me.Page.IsPostBack Then
            ''or try only binding on page load (the first time only)

            'Dim a(100) As String

            'Dim i As Integer
            'For i = 0 To 100
            '    a(i) = i
            'Next

            'GridView1.DataSource = a
            'GridView1.DataBind()

        End If

    End Sub




    Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged
        'show selected row
        Literal1.Text = GridView1.SelectedIndex.ToString
        GridView1.Rows(GridView1.SelectedIndex).BackColor = Drawing.Color.Aqua
    End Sub

---

YEA! It works… and I learned something really important in the process.

I had tried something similar to that last night and again with your HTML exactly as you have it… with the same result as with the panel: I receive the Intellisense error "Validation (XHTML 1.0 Transitional): Attribute 'onScroll' is not a valid attribute of element 'div".

When I realized what the message was telling me, I did a little research and learned that the ‘onScroll’ is only available as a server side attribute and not available client side without some custom attribute code work. With this, I was able to go back to the panel object (has more client side control attributes) and use the same code you provided, but with the panel object… and it works as well!

Thanks for taking the time brin351, really. Cheers :thumb:

The onScroll event apparently is not part of the w3c standards it's a microsoft I.E. thing. If you try the same page in other browsers it will not work. If that's a problem try googling for other solutions.

Regards

Brin

Well, I do not know about all other browsers, but both IE and Firefox display correctly with the onScroll attribute. :)

IE and Firefox is good enough for me...