This is a migrated thread and some comments may be shown as answers.

Persisting page scrolled to position between postbacks on grid insert/edit - DNN Module

25 Answers 777 Views

Grid

This is a migrated thread and some comments may be shown as answers.

J asked on 14 Mar 2013, 04:24 PM

I have the following markup in my code which is a RadGrid inside an UpdatePanel inside a div on a user control. Whenever I add a new row to the grid by clicking the 'Add Athlete' command bar button, it puts the grid into edit mode and sets focus to the first editor control perfectly. The grid is located near the bottom of my page. When I click 'Add Athlete' or edit an existing row, a post back is done as expected but the page's scrolled to position is lost; it always loads the page at 0,0 (top). I have tried several approaches with no luck:

1) Javascript to save the x/y scrolled positions into a hidden field and scroll to those positions on load
2) "Parent.Page.MaintainScrollPositionOnPostBack = true" in my page_load event
3) <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" /> in the grid's definition
4) Setting my DNN module definition to 'Support partial rending' on and off
5) Setting up a new project with a standard (non-master) page and using the following page declaration:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tester.WebForm1" MaintainScrollPositionOnPostBack="true" %>

Nothing works. This is all hosted inside a custom user control which is a View module for DotNetNuke 6.

Any ideas?

My update panel and grid's definition:

<div>

<asp:UpdatePanel runat="server" ChildrenAsTriggers="true" ID="upnlAthleteList">

<ContentTemplate>

<telerik:RadGrid ID="grdAthletes" runat="server" AllowAutomaticDeletes="True" AllowSorting="True"

PageSize="12" AutoGenerateColumns="False" OnNeedDataSource="grdAthletes_NeedDataSource"

OnItemCommand="grdAthletes_ItemCommand" OnPreRender="grdAthletes_PreRender" OnUpdateCommand="grdAthletes_UpdateCommand"

Width="758px" OnDeleteCommand="grdAthletes_DeleteCommand" OnEditCommand="grdAthletes_EditCommand"

OnItemDataBound="grdAthletes_ItemDataBound" ShowStatusBar="True" AllowAutomaticInserts="True"

AllowAutomaticUpdates="True" OnItemCreated="grdAthletes_ItemCreated" Skin="Metro"

BorderStyle="None" CellSpacing="0" GridLines="None" ForeColor="White" BackColor="Transparent"

ShowFooter="True">

<ValidationSettings ValidationGroup="AthletesGrid" />

<ClientSettings AllowKeyboardNavigation="True">

<Selecting AllowRowSelect="True" />

<KeyboardNavigationSettings AllowSubmitOnEnter="True" AllowActiveRowCycle="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />

<ClientEvents OnKeyPress="OnKeyPress" OnRowSelected="RowSelected" OnRowClick="RowClick"

OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />

<Resizing ShowRowIndicatorColumn="False" />

</ClientSettings>

<AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />

<MasterTableView NoMasterRecordsText="No athletes to display." EditMode="InPlace"

CommandItemDisplay="Bottom" BorderStyle="None" BackColor="Transparent" ShowFooter="False">

<HeaderStyle BorderStyle="None" Font-Bold="True" Font-Size="Medium" ForeColor="White"

Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="True" />

<CommandItemStyle CssClass="rgCommandRow" />

<FooterStyle BorderStyle="None" CssClass="grid-footer" />

<CommandItemTemplate>

<div>

<asp:LinkButton ID="btnAddNew" runat="server" CommandName="AddNewRow">

<img style="border:0px;vertical-align:middle;" alt="Add Athlete" src="Images/112_Plus_Green_32x42_72.png" /> Add Athlete</asp:LinkButton>

</div>

</CommandItemTemplate>

<CommandItemSettings ExportToPdfText="Export to PDF" ShowRefreshButton="False" AddNewRecordText="Add Athlete">

</CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings EditFormType="Template">

<EditColumn FilterControlAltText="Filter EditCommandColumn column" CancelImageUrl="Cancel.gif"

InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" Visible="true" Display="true">

</EditColumn>

</EditFormSettings>

<ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />

<AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />

<EditItemStyle BackColor="Gainsboro" BorderStyle="None" />

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

<Columns>

<telerik:GridBoundColumn ConvertEmptyStringToNull="False" DataField="RowCount" EmptyDataText="" FilterControlAltText="Filter RowCount column" HeaderText="" SortExpression="RowCount" UniqueName="RowCount" ReadOnly="true">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="24px" CssClass="grid-header grid-header-first" />

<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="24px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name"

UniqueName="FirstName" ConvertEmptyStringToNull="False" SortExpression="FirstName"

EmptyDataText="" ColumnEditorID="txtGridEdit_FirstName" ColumnGroupName="AthleteName"

ShowSortIcon="False">

<ColumnValidationSettings EnableRequiredFieldValidation="True">

<RequiredFieldValidator ErrorMessage="<span class='red'>* Required</span>"></RequiredFieldValidator></ColumnValidationSettings>

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="90px" CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="MiddleName" HeaderText="M. Name" UniqueName="MiddleName"

ConvertEmptyStringToNull="False" EmptyDataText="" SortExpression="MiddleName"

ColumnEditorID="txtGridEdit_MiddleName" ColumnGroupName="AthleteName" ShowSortIcon="False">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="80px" CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="LastName"

ConvertEmptyStringToNull="False" SortExpression="LastName" EmptyDataText="" ColumnEditorID="txtGridEdit_LastName"

ColumnGroupName="AthleteName" ShowSortIcon="False">

<ColumnValidationSettings EnableRequiredFieldValidation="True">

<RequiredFieldValidator ErrorMessage="* Required"></RequiredFieldValidator></ColumnValidationSettings>

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="90px" CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Gender" SortExpression="Gender" UniqueName="Gender"

DataField="Gender" FilterControlAltText="Filter Gender column" ColumnEditorID="cmbGridEdit_Gender"

ShowSortIcon="False">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Gender") %></ItemTemplate>

<EditItemTemplate>

<asp:DropDownList ID="ddlGender" runat="server">

<Items>

<asp:ListItem Text="Female" Value="Female" />

<asp:ListItem Text="Male" Value="Male" Selected="True" />

</Items>

</asp:DropDownList>

</EditItemTemplate>

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="80px" CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" Width="90%" VerticalAlign="Top" />

</telerik:GridTemplateColumn>

<telerik:GridDateTimeColumn ConvertEmptyStringToNull="False" DataField="DoB" FilterControlAltText="Filter DoB column"

HeaderText="Date of Birth" SortExpression="DoB" UniqueName="DoB" DataFormatString="{0:M/d/yy}"

DataType="System.DateTime" EmptyDataText="" ColumnEditorID="dtGridEdit_DoB" ShowFilterIcon="False"

EditDataFormatString="M/d/yy" MaxLength="8" ShowSortIcon="False">

<ColumnValidationSettings EnableRequiredFieldValidation="True">

<RequiredFieldValidator ErrorMessage="* Max age: 20" ID="valReqDoB"></RequiredFieldValidator>

</ColumnValidationSettings>

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="106px" CssClass="grid-header" />

<ItemStyle Width="100%" HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>

</telerik:GridDateTimeColumn>

<telerik:GridMaskedColumn ConvertEmptyStringToNull="False" DataField="ZipCode" DataFormatString="{0:#####}"

FilterControlAltText="Filter ZipCode column" HeaderText="Zip Code" Mask="#####"

SortExpression="ZipCode" UniqueName="ZipCode" EmptyDataText="" ShowSortIcon="False">

<ColumnValidationSettings EnableRequiredFieldValidation="True">

<RequiredFieldValidator ErrorMessage="* Required"></RequiredFieldValidator></ColumnValidationSettings>

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="80px" CssClass="grid-header" />

<ItemStyle Width="100%" HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>

</telerik:GridMaskedColumn>

<telerik:GridBoundColumn ConvertEmptyStringToNull="False" DataField="Email" FilterControlAltText="Filter Email column"

HeaderText="Email" SortExpression="Email" UniqueName="Email" EmptyDataText=""

ColumnEditorID="txtGridEdit_General_Large" ShowSortIcon="False">

<ColumnValidationSettings EnableRequiredFieldValidation="True">

<RequiredFieldValidator ErrorMessage="* Required" ID="valEmailColumnRequired" />

</ColumnValidationSettings>

<HeaderStyle Width="160px" Wrap="False" HorizontalAlign="Left" CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn ConvertEmptyStringToNull="False" DataField="UniqueID" EmptyDataText=""

FilterControlAltText="Filter column column" HeaderText="Unique ID" SortExpression="UniqueID"

UniqueName="UniqueID" Visible="False">

<HeaderStyle CssClass="grid-header" />

<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Edit" FilterControlAltText="Filter DeleteColumn column"

ImageUrl="Images/126_Edit_16x16_72.png" Text="" UniqueName="EditColumn" Resizable="false"

ConfirmDialogType="RadWindow">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="24px" CssClass="grid-header">

</HeaderStyle>

<ItemStyle Width="100%" HorizontalAlign="Right" VerticalAlign="Top" />

</telerik:GridButtonColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" FilterControlAltText="Filter DeleteColumn column"

ImageUrl="Images/305_Close_16x16_72.png" Text="" UniqueName="DeleteColumn" Resizable="false"

ConfirmText="Remove this athelete?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove"

ShowInEditForm="True">

<HeaderStyle Wrap="False" HorizontalAlign="Left" Width="24px" CssClass="grid-header grid-header-last">

</HeaderStyle>

<ItemStyle Width="100%" HorizontalAlign="Right" VerticalAlign="Top" />

</telerik:GridButtonColumn>

</Columns>

</MasterTableView><EditItemStyle BackColor="Gainsboro" BorderStyle="None" />

<FooterStyle BorderStyle="None" />

<HeaderStyle BorderStyle="None" Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" />

<CommandItemStyle CssClass="rgCommandRow" />

<ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

<SelectedItemStyle BorderStyle="None" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid><br />

<asp:Panel id="pnlMaxAthletesNote" style="display:none;" runat="server">

<asp:Label runat="server" ID="lblMaxAthletes" Text="The maximum number of athletes for this team is {0}" CssClass="red" />

</asp:Panel>

<telerik:GridTextBoxColumnEditor ID="txtGridEdit_FirstName" runat="server" TextBoxStyle-Width="98%" />

<telerik:GridTextBoxColumnEditor ID="txtGridEdit_MiddleName" runat="server" TextBoxStyle-Width="98%" />

<telerik:GridTextBoxColumnEditor ID="txtGridEdit_LastName" runat="server" TextBoxStyle-Width="98%" />

<telerik:GridTextBoxColumnEditor ID="txtGridEdit_General_Large" runat="server" TextBoxStyle-Width="98%" />

<telerik:GridDateTimeColumnEditor runat="server" ID="dtGridEdit_DoB" TextBoxStyle-Width="98%" />

<telerik:GridDropDownListColumnEditor ID="cmbGridEdit_Gender" runat="server" DropDownStyle-Width="98%" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

25 Answers, 1 is accepted

answered on 29 Mar 2013, 03:12 PM

I have an example project that demonstrates the issue but I cannot open a support ticket because this account is not linked to our actual subscription (I get the you have no active license and your trial expired message on the support page) and I don't have that account's information (my boss does and he's on vacation right now).

I'll try and open a support ticket once he's back.

But, I have definitely figured out what's triggering it.

Step 1) Make a web page that has enough content on it that it takes up the full (vertical) length (one screenful) and then add a grid to the bottom (objective is to have grid be at least mostly off the screen).
Step 2) Add a button on the command bar for the grid to initiate an Add Record request using InLine editing and set the command bar's position to Bottom.
Step 3) Wrap the grid inside an UpdatePanel (with ChildrenAsTriggers = true) or RadAjaxPanel.
Step 4) Load the page, scroll down and click the Add Record button. When it posts back to enable the edit form, it will only scroll down enough to see the active edit row instead of where you were actually scrolled to.
Step 5) Remove the UpdatePanel/RadAjaxPanel, reload the page and everything works as expected.

Let me know if you were unable to duplicate it with these steps. If not, then I'll open a support ticket when my boss returns.

Thanks again for all of your help.

Accepted

answered on 01 May 2013, 07:32 PM

I don't need it to scroll to the selected item. It already does that. I want it to scroll back to the position the page was at before initiating an Add Row. The current new add row get's scrolled to but that new row is at the bottom of the screen at this point because of this issue.

After this much time spent duplicating and waiting for a response, the response is that even though the grid is the one causing it and there's no way for me to fix it myself so I'm just S.O.L. and all Telerik grid's that are ajax-ified need to be high up on the page so that the scrolled to position is never a problem? That's the fix? That's the official answer on this?

It seems like whatever code is causing the page to scroll down to the new row is at fault here. It would seem, from an outsider's view, that the cause lies in the grid. If I'm wrong, please tell me what is the source of the issue and I'd be happy to pursue that and make whatever changes we need to make.

I'd say "Thanks" but I'm not feeling very thankful that we stuck with Telerik controls right now. It feels like it's been one glitch after another, one odd way of handling common scenarios to the next, one undocumented javascript function to the next, and now this response after waiting for 3 weeks since the last response. This particular issue is non-negotiable, like I can't have my pages doing this or being required to keep the grid at the top of the page, that's completely unreasonable. If this is the best you can do on this matter then I'll have to invest some time and money into switching to another component suite because having to live with this issue is just unacceptable and Telerik controls are no longer saving us time and effort.

Put yourself in my shoes, do you really see this as an acceptable resolution? You'd be fine with this in your projects? I don't think so.

answered on 03 May 2013, 04:31 PM

Hi Juan,

I am sorry that you have waited but we could not guarantee response time in the forums, even more when there are national holidays here.
I have send you the help topic to see how you can scroll to given item. It is up to you which item you will use. You can easily store the current scroll position on client clicking of the Add button.

The scroll position is persisting by default as you can actually test in this demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx
So if you have such problems, is because most probably you are manually changing the scroll position or your page has some JavaScript error.

We can not guess what exact problem is by looking part of your markup. You are saying to step into you shoos, but you do not do the same. Please do not offend, but if you can not resolve and issue by having the whole code that you can test and debug, how you expect to get absolutely straight answer from the community here?

All the best,
Vasil
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 03 May 2013, 04:50 PM

First off, 3 weeks since you received the sample code, not a day or 2 or even a week, 3 weeks with no response. How many holidays are you celebrating?

Secondly, it already scrolls to the position of the active item which is part of the problem, it shouldn't scroll to the new row, it should scroll to where the page was before the grid performed the ajax-ified request. What happens when this is the first new row in the grid? This solution does not come close to addressing the issue at hand since there is no grid row item to have it scroll to other than the new row.

Thirdly, it's not about looking at the markup, you have a sample project that demonstrates the problem, so to say you're limited to the markup I've included here is inaccurate.

Finally, I have put myself in your shoes, and I'm sure its frustrating that you have no idea why this behavior is happening BUT you also have to acknowledge that you have the sample project, it exemplifies the problem and there is no error on that page or anywhere else in that project. The ONLY factor that persists and introduces this problem is the grid.

I get the distinct impression that we are on 2 separate pages here and you're not quite understanding the problem and seeing the whole picture of what I'm trying to point out and resolve.

answered on 06 May 2013, 08:27 AM

Hello Juan,

I reviewed your project, and there are several issues, that does not match with what you are explaining:
First think that i noticed is that, clicking on the Add Athlete in your project do not do Ajax call, but full Post Back. So since you don't have any logic to persist your scroll back to the same position, it will go in top of the page. This is the way that browser works when it reloads page.

In your code you are focusing the first element in the new record using this code:

if (ctrlFieldEditor != null)

ctrlFieldEditor.Focus();

And actually this is what causing the scrolling, since the browser scrolls automatically until the focused element become visible.

I know what you will say about the Ajax, and yes. I have tested to uncomment your upnlAthleteList UpdatePanel. And then to test your page again. Then I noticed two thinks:
First one is that the window scroll does not change, it remains in the same position, and the newly added item is inside the viewable area.
Second think is that if I cancel the editing I get error in your custom code. In the line below the objCurItem.id is undefined. So getting it's length result in exception.

if ((objCurItem != null) && (objCurItem.id.length > 0)) {

I will not bother to debug your custom code in this page. Please excuse me, but I still do not understand why you think we should feel obligated to resolve your problems here? Even more to do it in some specified time.

We are really interested when it comes to actual bug, limitation other problem inside our controls. In this case we will do anything possible for fix it. And if our clients send us formal support, we will do our best to provide responses in time and to help them in using our controls.

But this is not the case when it comes for correction and debugging of user code posted in our forums. We are trying to help in the forums by free will, and if we don't do it, you should not judge us about it

Greetings,
Vasil
the Telerik team