CODEWITHSUNDEEP
asp.netvb.netfocusajaxcontroltoolkitmodalpopupextender
giselleghadyani
giselleghadyani

Reputation: 182

Set the focus AND maintain the scroll position ASP.NET AJAXControlToolkit

I have a page that loads a data grid. The first column has link buttons with an edit command which calls a modal popup with the focus set on the first field which is either a text box or drop down list.

Now my issue is, when I scroll down on the data grid and select edit, the page scrolls upwards, pushing down the row in the data grid that I selected to edit, just before the modal pops up. The only way to maintain the scroll position is by removing the focus from my modal popup.

Is there any way to set the focus AND maintain the scroll position?

I am using ASP.NET Version 4.5.51650, AJAXControlToolkit Version 15.1.2, VB.NET

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
    <asp:DataGrid ID="DataGrid" runat="server">
      <Columns>
        <asp:TemplateColumn HeaderText="Name">
          <ItemTemplate>
             <asp:LinkButton ID="lb_Name" CommandName="Edit" runat=server />
          </ItemTemplate>
        </asp:TemplateColumn>
      </Columns>
    </asp:DataGrid>
  </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
    <asp:Button ID="Button1" style="display:none" runat="server" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" TargetControlID="Button1" PopupControlID="ModalPopupExtender_Panel" runat="server" />
      <asp:Panel ID="ModalPopupExtender_Panel" style="display:none" DefaultButton="ModalPopupExtender_Ok" runat="server">
        <asp:Table runat="server">
          <asp:TableRow>
            <asp:TableCell>
              <asp:Textbox ID="Textbox1" runat="server" />
            </asp:TableCell>
          </asp:TableRow>
        </asp:Table>
        <div>
          <asp:Button ID="ModalPopupExtender_Ok" Text="Save" runat="server" />
          <asp:Button ID="ModalPopupExtender_Cancel" Text="Cancel" runat="server" />
        </div>
      </asp:Panel>
  </ContentTemplate>
</asp:UpdatePanel>

Code Behind:

Private Sub BindDataGrid()
  'code goes here
  UpdatePanel1.Update()
End Sub

Private Sub DataGrid_EditCommand(ByVal source As Object, ByVal e As DataGridCommandEventArgs) Handles DataGrid.EditCommand
  'code goes here
  UpdatePanel2.Update()
  Textbox1.Focus()
  ModalPopupExtender.Show()

Upvotes: 0

Views: 1632

Answers (1)

Hassan Alhaj
Hassan Alhaj

Reputation: 333

SetFocus uses javascript function "scrollIntoView" to scroll to the focused field, you can override it using the following code, this will scroll the page only if the field is not in the visible area,

$( document ).ready(function() {
HTMLInputElement.prototype.scrollIntoView = function(a) {
    this.scrollIntoViewIfNeeded();
}
HTMLSelectElement.prototype.scrollIntoView = function(a) {
    this.scrollIntoViewIfNeeded();
}
HTMLAreaElement.prototype.scrollIntoView = function(a) {
    this.scrollIntoViewIfNeeded();
}  });

Upvotes: 1

Related Questions