0

When you click edit button on the gridview, the row is selected and you are able to update values in a textbox. The scrollbar shows the selected row and does not move towards the beginning of the web page, however around half way of the gridview, if you click on edit then it jumps a few rows down and you have to scroll up to go to the selected row to edit. When you edit the second to last row, it jumps all the way up and you have to scroll down. For some reason its not keeping the scroll position.

I tried to use in my edit grid view method :

gvCaseList.FirstDisplayedScrollingRowIndex = e.NewEditIndex;

but its bringing back an error:

> 'System.Web.UI.WebControls.GridView' does not contain a definition for
> 'FirstDisplayedScrollingRowIndex' and no extension method
> 'FirstDisplayedScrollingRowIndex' accepting a first argument of type
> 'System.Web.UI.WebControls.GridView' could be found (are you missing a
> using directive or an assembly reference?

The edit method is as follows:

    //When edit is selected, allows user to update textbox and drop down
protected void gvCaseList_edit(object sender, GridViewEditEventArgs e)
{


    EditClicked = true;
    Label label1 = (Label)gvCaseList.Rows[e.NewEditIndex].FindControl("Label1");
    CurrentException = label1.Text;

    gvCaseList.EditIndex = e.NewEditIndex;

    if (ViewState["dirState"] != null)
    {
        gvCaseList.DataSource = ViewState["dirState"];
        gvCaseList.DataBind();
    }
    else
    {
        GetgvSearchCaseListData();
    }

}

How can i make sure on edit, the row being edited is shown on the browser and it stops scrolling to a different part on the page?

I have the gridview wrapped around an update panel in my aspx code:

 <asp:updatepanel runat="server">
    <ContentTemplate>        
     <asp:GridView ID="gvCaseList" runat="server" AllowSorting="True" OnSorting="gvCaseList_Sorting" OnRowEditing="gvCaseList_edit" OnRowUpdating="gvCaseList_RowUpdating" OnRowCancelingEdit="gvCaseList_RowCancelingEdit" OnRowDataBound="gvCaseList_RowDataBound" CellPadding="4" GridLines="Horizontal" AutoGenerateColumns="False" BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px"  >
         <AlternatingRowStyle BackColor="Silver" />
        <Columns>     
                   <asp:TemplateField> 
                <ItemTemplate>
                    <asp:Button ID="EditButton" CssClass="btn btn-primary dropdown-toggle" runat="server" Text="Edit" CommandName="Edit" ></asp:Button>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Button ID="UpdateButton" CssClass="btn btn-primary dropdown-toggle" runat="server" Text="Update" CommandName="Update" ></asp:Button>
                    <asp:Button ID="CancelButton" CssClass="btn btn-primary dropdown-toggle" runat="server" Text="Cancel"  CommandName="Cancel"></asp:Button>
                </EditItemTemplate>

                <ControlStyle Width="100px" />

            </asp:TemplateField>


        </Columns>



    </asp:GridView>
                     </ContentTemplate>
                 </asp:updatepanel>
ArunPratap
  • 4,816
  • 7
  • 25
  • 43
roa765
  • 285
  • 3
  • 19
  • FirstDisplayedScrollingRowIndex - how do i use this in the grid view edit event? – roa765 Jul 18 '18 at 11:01
  • 1
    The `FirstDisplayedScrollingRowIndex`property is not available on a `System.Web.UI.WebControls.GridView` which you use for web. It is available on `System.Windows.Forms.DataGridView`which you use when developing desktop (.exe) applications. – mortb Jul 18 '18 at 11:07
  • What can i use as an alternative for the browser to focus on the edited row? – roa765 Jul 18 '18 at 11:08
  • Take a look here: https://stackoverflow.com/questions/6666038/asp-net-postback-scroll-to-specific-position – mortb Jul 18 '18 at 11:10
  • I have tried this - did not work for me. Both Update panel and Page.MaintainScrollPositionOnPostback = true – roa765 Jul 18 '18 at 11:11
  • I've used the `scrollIntoView()`. You can output an unique `id` attribute on some element in the row that you are editing. You register a javascript that runs on page load and does something like `document.getElementById().scrollIntoView();` – mortb Jul 18 '18 at 11:14
  • Do you mind explaining a little bit more? I will give this a go. How do i output the unique ID attribute on the row im editing into the javascript side? I have a column which is a unique ID - how do i parse this column into javascript side – roa765 Jul 18 '18 at 11:18
  • Well. not sure about the syntax in aspx anymore... Maybe this would work: One of your column could have that contains `` And in your `gvCaseList_edit(..)` method you could add somewhere `ScriptManager.RegisterStartupScript(this, this.GetType(), "scrollIntoViewScript", "document.getElementById('someprefix_" + + "')", true);` The prefix part is to make sure this is is *really* unique – mortb Jul 18 '18 at 11:59
  • '" runat="server" Visible="false" > – roa765 Jul 18 '18 at 14:46
  • Tried the above and its coming back as ' the server tag is not well formed' – roa765 Jul 18 '18 at 14:46
  • If you use `` you should use `ClientId` and set `ClientIdMode="static"` https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx – mortb Jul 18 '18 at 15:28
  • `ClientId="<%# string.Format("prefix_{0}", Eval("KPIID")) %>"` according to this https://forums.asp.net/t/1979371.aspx?Is+it+possible+to+use+Eval+field+name+to+generate+ASP+Net+Web+control+ID+s+ – mortb Jul 18 '18 at 15:33
  • (this is why I don't work with aspnet webforms any more, so many things are unintuitive) – mortb Jul 18 '18 at 15:34
  • ok still cant get it to work - tried this to test it: $("#gvCaseList_EditButton_62").click(function () { alert("yes"); var target = document.getElementById("gvCaseList_kpiidlabel_62"); target.parentNode.scrollTop = target.offsetTop; alert("no"); }); and it is not doing the scroll top, offset top line – roa765 Jul 18 '18 at 15:55
  • I have hard coded the IDs now to give it a go. However the alert Yes does work – roa765 Jul 18 '18 at 15:55
  • If you already using an `updatePanel` look for anything that might be forcing a focus on your page. In my case, it was a `defaultfocus` attribute in the form tag that was forcing the page to jump up. (https://stackoverflow.com/a/54470779/2089460) – Wilson Jan 31 '19 at 23:37

0 Answers0