Link to home
Start Free TrialLog in
Avatar of smkkaleem
smkkaleem

asked on

Re: Page scroll back to the original position in a DataGrid when a user posts a form back to a server - abnormal behaviour

I am confronted with a strange issue. When I go to the edit mode in a datagrid by clicking the edit link button, the page scrolls back to the original position (does not go to the top of the grid) which is what I want. However, this only happens upto 100th row in the datagrid. For 101st row and onwards, the page does not scroll back to the original position on clicking th edit link button. It rather goes to the top and first row in the grid. This looks like an abnormal behaviour, i.e correctly scrolling back to the original position for the 1st 100 rows and incorrectly no scrolling back to the original position for any row after 100. The code I am using is the same as in the following link:

http://dotnetjunkies.com/Article/6292ABC5-A1BC-48A6-AE96-530E6AF9052D.dcik

Following is my code:

Private Sub dgSimpleSearch_EditCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dgSimpleSearch.EditCommand
        dgSimpleSearch.EditItemIndex = e.Item.ItemIndex
    End Sub

    Private Sub dgSimpleSearch_ItemCommand1(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dgSimpleSearch.ItemCommand

        If bookmark Then
            bookmarkIndex = e.Item.ItemIndex
            Me.InsertScriptBlock()
        End If

        Select Case e.CommandName
            Case "Delete"
                Datagrid_Delete(source, e)
            Case "Cancel"
                Session("NewRecord") = False
            Case "Hide"
                e.Item.Cells(e.CommandArgument).Visible = False
        End Select

    End Sub

    Private Sub dgSimpleSearch_ItemDataBound1(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgSimpleSearch.ItemDataBound
        Dim anchor As New LiteralControl
        If bookmark Then

            anchor.Text = "<a name=""" + intCount.ToString() + """>"
            intCount = intCount + 1
            e.Item.Cells(0).Controls.Add(anchor)

        End If
End Sub


Private Sub InsertScriptBlock()
        Dim jScript As New System.Text.StringBuilder

        jScript.Append("<script language=""JavaScript"">")
        jScript.Append("location.href=""#")
        jScript.Append(Me.bookmarkIndex.ToString())
        jScript.Append(""";")
        jScript.Append("</script>")

        Me.RegisterClientScriptBlock("Bookmark", jScript.ToString())

    End Sub

   
Any ideas or input will be appreciated, If u need any further code info for further research/understanding, e-mail me @smkkaleem@gmail.com

Thanks
Avatar of aki4u
aki4u

Try adding smartNavigation="True" to your web page.
This should do the trick.

e.g:
<%@ Page language="c#" Codebehind="test.aspx.cs" AutoEventWireup="false" Inherits="WebApplicationTest.test"  smartNavigation="True"%>
Avatar of smkkaleem

ASKER

aki4u,

I have tried it but this does not make any difference. For 101st row and onwards, the page does not scroll back to the original position on clicking th edit link button in the datagrid...

any other ideas

Thanks
Ok.

try this:

add this code to your edit sub:
Page.RegisterStartupScript("scrollIntoView", "<script language='JavaScript'>document.getElementById('" & EDIT_ID & "').scrollIntoView();</script>")
By edit sub do u mean DataGrid_Edit sub? If yes following is the code in the DataGrid_Edit sub. Should I add the line of code u posted at the end of this code like this?


    Sub DataGrid_Edit(ByVal Source As Object, ByVal E As DataGridCommandEventArgs)
        dgSimpleSearch.EditItemIndex = E.Item.ItemIndex
        BindData()
        dgSimpleSearch.Columns(2).Visible = False
        Page.RegisterStartupScript("scrollIntoView", "<script language='JavaScript'>document.getElementById('" & EDIT_ID & "').scrollIntoView();</script>")
    End Sub
and what does EDIT_ID refer to in this line of code?
copy this:

    Sub DataGrid_Edit(ByVal Source As Object, ByVal E As DataGridCommandEventArgs)
        dgSimpleSearch.EditItemIndex = E.Item.ItemIndex
        BindData()
        dgSimpleSearch.Columns(2).Visible = False

        Dim i As Int32
        Dim clientID As String = ""

        For i = 0 To E.Item.Cells(0).Controls.Count
            Dim ctrl As Control = E.Item.Cells(0).Controls(i)
            If (ctrl.ToString() = "System.Web.UI.WebControls.Label") Then 'customize this for your needs
                clientID = CType(ctrl, System.Web.UI.WebControls.Label).ClientID
                Exit For
            End If
        Next

        If clientID.Length > 0 Then
            Page.RegisterStartupScript("scrollIntoView", "<script language='javaScript'>document.getElementById('" & clientID & "').scrollIntoView();</script>")
        End If
    End Sub
when i inserted your code, the application crashed with the Microsoft Development Environment message box prompted with the following error:

Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

The application breaks on the last line of the following scrript:

</tr><tr style="background-color:#CCCCCC;">
            <td><a name="221"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
</table><script language='javaScript'>document.getElementById('dgSimpleSearch__ctl102_lblID').scrollIntoView();

It works on my side without any problems.

can you send me  your <asp:TemplateColumn>

as well as codebehind where  Page.RegisterStartupScript is.
The original code behind is following:

Private Sub dgSimpleSearch_ItemCommand1(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dgSimpleSearch.ItemCommand

        If bookmark Then
            bookmarkIndex = e.Item.ItemIndex
            Me.InsertScriptBlock()
        End If

        Select Case e.CommandName
            Case "Delete"
                Datagrid_Delete(source, e)
            Case "Cancel"
                Session("NewRecord") = False
            Case "Hide"
                e.Item.Cells(e.CommandArgument).Visible = False
        End Select

    End Sub


 Private Sub InsertScriptBlock()
        Dim jScript As New System.Text.StringBuilder

        jScript.Append("<script language=""JavaScript"">")
        jScript.Append("location.href=""#")
        jScript.Append(Me.bookmarkIndex.ToString())
        jScript.Append(""";")
        jScript.Append("</script>")

        Me.RegisterClientScriptBlock("Bookmark", jScript.ToString())

    End Sub


Private Sub dgSimpleSearch_ItemDataBound1(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgSimpleSearch.ItemDataBound
        Dim anchor As New LiteralControl
        If bookmark Then

            anchor.Text = "<a name=""" + intCount.ToString() + """>"
            intCount = intCount + 1
            e.Item.Cells(0).Controls.Add(anchor)
..........................
.........................
...........................

        End If

Remember, as I mentioned in my question, everything works fine upto row 100 (99 in terms of zero-based row collection), but stops working after record 101 (row 100 in terms of zero-based row collection)
also see this:

<asp:TemplateColumn>
                                    <ItemTemplate>
                                          <asp:Label id=lblID runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[ID]")  %>'>
                                          </asp:Label>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                          <asp:Label id=lblEditID runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[ID]")  %>'>
                                          </asp:Label>
                                    </EditItemTemplate>
                              </asp:TemplateColumn>
                              <asp:EditCommandColumn ButtonType="LinkButton" UpdateText="&lt;img border=0 src=Update.gif&gt;" CancelText="&lt;img border=0 src=Cancel.gif&gt;"
                                    EditText="&lt;img border=0 src=Edit.gif&gt;"></asp:EditCommandColumn>
                              <asp:ButtonColumn Text="&lt;img border=0 src=Cancel.gif&gt;" CommandName="Delete"></asp:ButtonColumn>
                              <asp:TemplateColumn SortExpression="Open Date" HeaderText="Store Opening">
                                    <HeaderTemplate>
                                          <P>
                                                <asp:CheckBox id="chkColumn3" runat="server" Width="108px" OnCheckedChanged="GetCheck"></asp:CheckBox><BR>
                                                <asp:LinkButton id="LinkButton10" runat="server" CommandName="Sort" ForeColor="White" BorderColor="Transparent"
                                                      BackColor="Transparent" CommandArgument="Open Date">Store Added Date</asp:LinkButton>&nbsp;
                                          </P>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                          <asp:Label id=lblOpenDate runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[Open Date]")  %>'>
                                          </asp:Label>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                          <asp:TextBox id=txtOpenDate runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[Open Date]")  %>'>
                                          </asp:TextBox>
                                    </EditItemTemplate>
                              </asp:TemplateColumn>
can you send me  your codebehind where  Page.RegisterStartupScript is.
I can't see it here.
Here u go:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here

        '## If this is a Valid Session and we don't have a cookie it's because the cookie has expired and
        '## we need to push the SessionEnded page
        If Session("ValidSession") And Request.Cookies("WHOA") Is Nothing Then
            Dim frameScript As String = "<script language='javascript'>window.parent.location='SessionEnded.htm';</script>"
            Page.RegisterStartupScript("FrameScript", frameScript)

            '## Either we don't have a valid cookie or this is not a Valid Session so we push the
            '## Unauthorized apge
        ElseIf Request.Cookies("WHOA") Is Nothing Or Not Session("ValidSession") Then
            Dim frameScript As String = "<script language='javascript'>window.parent.location='Unauthorized.htm';</script>"
            Page.RegisterStartupScript("FrameScript", frameScript)
        Else
            '## If this is not a postback then we load the parameters
            If Not IsPostBack Then
                LoadParameters()
            End If
            Response.Cookies("WHOA").Expires = DateTime.Now.AddMinutes(30)
        End If

        If Not Session("Edit") And lnkHideColumns.Text <> lnkExportToExcel.Text Then
            lnkBtnAdd.Text = lnkHideColumns.Text
            lnkHideColumns.Text = lnkExportToExcel.Text
            '''lnkHideColumns.Visible = False
            lnkExportToExcel.Visible = False
        End If

    End Sub
Sorry, but I'll need to see the sub or function where you call this:
Page.RegisterStartupScript("scrollIntoView", "<script language='javaScript'>document.getElementById('" & clientID & "').scrollIntoView();</script>")
Public Sub DataGrid_Edit(ByVal Source As Object, ByVal E As DataGridCommandEventArgs)
        dgSimpleSearch.EditItemIndex = E.Item.ItemIndex
        BindData()
        dgSimpleSearch.Columns(2).Visible = False
        Dim i As Int32
        Dim clientID As String = ""

        If bookmark Then
            bookmarkIndex = E.Item.ItemIndex
            Me.InsertScriptBlock()
        End If

        For i = 0 To E.Item.Cells(bookmarkIndex).Controls.Count
           Dim ctrl As Control = E.Item.Cells(0).Controls(i)
           If (ctrl.ToString() = "System.Web.UI.WebControls.Label") Then 'customize this for your needs
           clientID = CType(ctrl, System.Web.UI.WebControls.Label).ClientID
           Exit For
           End If
        Next

        If clientID.Length > 0 Then
            Page.RegisterStartupScript("scrollIntoView", "<script language='javaScript'>document.getElementById('" & clientID & "').scrollIntoView();</script>")
        End If


    End Sub
Check this link...download the code...compile it and add to your Toolbox. Then just drag and drop it on to your page and that's it.

To download the code go to:
http://aspnet.4guysfromrolla.com/code/sr.scroll.zip

To read the article go to:
http://aspnet.4guysfromrolla.com/articles/111704-1.aspx

aki4u,

I tried this, downloaded the code, added the dll to my project reference, and run it. But the same problem. As originally, it still works for the first 100 records but stops working for record 101 and onwards. Unfortunately there was no success with this smartScroll control...
ASKER CERTIFIED SOLUTION
Avatar of aki4u
aki4u

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
aki4u,

Perfect. This time it worked and even better, this control does keep the row at the same place on the screen rather than scrolling up to the top of the screen that my code was doing for the first 100 records. So what I did is that I have commented out my code and everything looks fine and consistent. I will post any questions after testing if I had. Then I will accept your answer. Thanks a lot aki4u,