Data Controls - How to scroll an edit item textbox into view RSS

• • Reply
  

  sbyard

  Contributor

  5891 Points

  1196 Posts

  Data Controls - How to scroll an edit item textbox into view

  Dec 12, 2009 04:37 PM|LINK

  If you have an ASP data control with an edit template such as a Listview and you set a row to edit mode, it will not scroll into view if not visible.

  E.g. -  A List View displays a list of linkbuttons within a DIV, which has a fixed height, so must scroll its content when there are enough items

  Clicking a link tells the listview to enter EDIT for that row. If it is outside of the visible area, we want the rendered edit template to scroll into view - an issue for a number of data controls

   

  Step 1 is to find a control in the edit template and set it to focus. When binding your data, only one row will have the edit template used, so you should find only one textbox

       protected void lvYourListView_ItemDataBound(object sender, ListViewItemEventArgs e)
      {
          TextBox t = e.Item.FindControl("txtYourControl") as TextBox;
  
          if (t != null)
              t.Focus();
      }

   

  Step 2 is to set a Javascript Scroll into view on the edit control in your template when it gets focus

  <asp:TextBox ID="txtYourControl" runat="server" onfocus="this.scrollIntoView()" ></asp:TextBox>

  
  

  If it was easy, everybody would be doing it.
  • Moved by anas on Dec 13, 2009 05:50 AM