locked
Scroll to a specific row in gridview RRS feed

  • Question

  • User1310055179 posted

    Hi,

    I have a content page that has an ajaxcontroltoolkit TabContainer with 2 tabs: "Code" and "UI".

    Inside the "Code" tab there is a gridview control with ajaxcontroltoolkit HoverMenuExtender to allow gridview edit.

    When the "UI" tab is active, and the user clickes on one of the controls inside the tab and afterward click on the "Code" tab, I would like two things to happen:

    1. Change the EditIndex to the relevant row (each control in the "UI" tab has a matching row in the "Code" tab).
    2. Scroll to the selected row.

    I have managed to get it to work, except for the scrolling part. 

    I would really appreciate your help with that.

    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
        <asp:Panel runat="server" ID="paramsPanel">
            
        
            <table id="UIMenu" style="visibility:visible;" runat="server">
            <tr>
                
                <td style="padding-right15px;">
                    Index: <asp:TextBox ID="TextBox_Index" runat="server" Enabled="false" width="25"></asp:TextBox>
                </td>
                <td style="padding-right15px;">
                    Row: <asp:TextBox ID="TextBox_Row" runat="server" width="25" Enabled="false"></asp:TextBox>
                </td>
                <td style="padding-right15px;">
                    Col: <asp:TextBox ID="TextBox_Col" runat="server" width="25" Enabled="false"></asp:TextBox>
                </td>
                <td style="padding-right15px;">
                    Name: <asp:TextBox ID="TextBox_Name" runat="server" width="150" Enabled="false"></asp:TextBox>
                </td>
                <td style="padding-right15px;">
                    Type: <asp:Label ID="Label_Type" runat="server" Text="" Font-Bold="true" Font-Size="Large"></asp:Label>
                </td>
                
            </tr>
        </table>
        </asp:Panel>
        
        <ajaxToolkit:TabContainer runat="server" Height="400px" ID="TabContainer1" OnClientActiveTabChanged="Tab_SelectionChanged"
            Width="980px"
            ActiveTabIndex="1"        
            OnDemand="true"        
            AutoPostBack="false"
            TabStripPlacement="Top"
            ScrollBars="Auto"
            UseVerticalStripPlacement="false"
            VerticalStripWidth="120px">
                <ajaxToolkit:TabPanel runat="server" 
                    HeaderText="Code"
                    Enabled="true"
                    ScrollBars="Both"       
                    OnDemandMode="Once">
                    <ContentTemplate>
                        <asp:HiddenField ID="HiddenField_Update" runat="server" Value="1" EnableViewState="true"/>
                        <asp:GridView ID="reportsGridView" runat="server" DataKeyNames="t0" 
                            AutoGenerateColumns="False" ShowHeader="False"  BackColor="#ffffff" 
                            GridLines="None" OnRowDeleting="gv_RepsRowDeleting"  OnRowEditing="gv_RepsRowEditing"
                            OnRowCancelingEdit="gv_RepsRowCancelingEdit" OnRowUpdating="gv_RepsRowUpdating" OnSelectedIndexChanged="LinkButtonRep_Click" >
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:Panel CssClass="popupMenu" ID="PopupMenu2" runat="server">
                                            <div style="border1px outset whitepadding2pxz-index:5000">
                                                <div id="rowMenu">
                                                    <asp:LinkButton ID="LinkButtonRepsEdit" runat="server" CommandName="Edit" Text="Edit" />
                                                    <br />
                                                    <asp:LinkButton ID="LinkButtonRepsDelete" runat="server" CommandName="Delete" Text="Delete" />
                                                    <br />
                                                    <asp:LinkButton ID="LinkButtonRepsAdd" runat="server" CommandName="Select" Text="Add" />
                                                    <br />
                                                    <asp:LinkButton ID="LinkButtonRepsCopy" runat="server" CommandName="Select" Text="Copy"/>
                                                    <br />
                                                    <asp:LinkButton ID="LinkButtonRepsCut" runat="server" CommandName="Select" Text="Cut"/>
                                                    <br />
                                                    <asp:LinkButton ID="LinkButtonRepsPaste" runat="server" CommandName="Select" Text="Paste"/>
                                                    <br />
                                                    
                                                </div>
                                            </div>
                                        </asp:Panel>
                                                            
                                        <asp:Panel ID="Panel10" runat="server">
                                            <table id="tbl" style="width:100%border-collapsecollapsetable-layout:fixeddisplaytablefont-size14pxmargin1%word-wrap:break-word;">
                                               <tr>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="true" ID="Label0" runat="server" 
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t0"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label1" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t1"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label2" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t2"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label3" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t3"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label4" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t4"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label5" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t5"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:10%;">
                                                        <asp:Label Font-Bold="false" ID="Label6" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t6"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label7" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t7"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label8" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t8"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label9" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t9"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label10" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t10"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:20%;">
                                                        <asp:Label Font-Bold="false" ID="Label11" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t11"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:15%;">
                                                        <asp:Label Font-Bold="false" ID="Label12" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t12"))) %>' />
                                                    </td>
                                                    <td style="border-bottom1px solid #dddwidth:5%;">
                                                        <asp:Label Font-Bold="false" ID="Label13" runat="server"
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t13"))) %>' />
                                                    </td>
                                                </tr>
                                            </table>
                                        </asp:Panel>
                                        <ajaxToolkit:HoverMenuExtender ID="hme12" runat="Server"
                                            HoverCssClass="popupHover"
                                            PopupControlID="PopupMenu2"
                                            PopupPosition="Left"
                                            TargetControlID="Panel10"
                                            PopDelay="25" />
                                    </ItemTemplate>
     
                                    <EditItemTemplate>
                                        <!-----Panel for displaying the update and cancel options for selected row------>
                                        <asp:Panel ID="panel_updateDelete" runat="server"  
                                        CssClass="popupMenu">
                                            <div style="border1px outset whitepadding2pxz-index:5000">
                                                <asp:LinkButton ID="lnkUpdate"  CommandName="Update" 
                                                runat="server" Text="Update"></asp:LinkButton><br />
                                                <asp:LinkButton ID="lnkCanel" runat="server" 
                                                Text="Cancel" CommandName="Cancel"></asp:LinkButton>
                                            </div>
                                        </asp:Panel>
     
                                            <!-----Panel for displaying the TextBoxes in GridView------>
                                        <asp:Panel ID="panel_TB" runat="server" Style="width:90%;">
                                            <table runat="server" id="updateValsTbl" border="1" style="border-collapse:collapsewidth:100%;">
                                                <tr>
                                                    <th style="width:5%;">No.</th>
                                                    <th style="width:5%;">(1)Type</th>
                                                    <th style="width:5%;">(2)Row</th>
                                                    <th style="width:5%;">(3)Col</th>
                                                    <th style="width:5%;">(4)FontSize</th>
                                                    <th style="width:5%;">(5)Op0</th>
                                                    <th style="width:10%;">(6)Name</th>
                                                    <th style="width:5%;">(7)Op1</th>
                                                    <th style="width:5%;">(8)Width</th>
                                                    <th style="width:5%;">(9)Link</th>
                                                    <th style="width:5%;">(10)H/E</th>
                                                    <th style="width:20%;">(11)Op2</th>
                                                    <th style="width:15%;">(12)Help</th>
                                                    <th style="width:5%;">(13)ReportName</th>
                                                </tr>
                                                <tr style="background-color:beige;">
                                                    <td><asp:Label Font-Bold="true" ID="txt0" runat="server" 
                                                            Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t0"))) %>' /></td>
                                                    <td><asp:DropDownList ID="txt1" runat="server" onchange="setTooltips(this.value, this.id);"  style="width:80%;"
                                                         SelectedValue='<%# Eval("t1"%>'>
                                                        <asp:ListItem>x</asp:ListItem>
                                                        <asp:ListItem>B</asp:ListItem>
                                                        <asp:ListItem>b</asp:ListItem>
                                                        <asp:ListItem>P</asp:ListItem>
                                                        <asp:ListItem>S</asp:ListItem>
                                                        <asp:ListItem>s</asp:ListItem>
                                                        <asp:ListItem>V</asp:ListItem>
                                                        <asp:ListItem>v</asp:ListItem>
                                                        <asp:ListItem>D</asp:ListItem>
                                                        <asp:ListItem>d</asp:ListItem>
                                                        <asp:ListItem>H</asp:ListItem>
                                                        <asp:ListItem>C</asp:ListItem>
                                                        <asp:ListItem>c</asp:ListItem>
                                                        <asp:ListItem>Q</asp:ListItem>
                                                        <asp:ListItem>q</asp:ListItem>
                                                        <asp:ListItem>Q*</asp:ListItem>
                                                        <asp:ListItem>r</asp:ListItem>
                                                        <asp:ListItem>L</asp:ListItem>
                                                        <asp:ListItem>N</asp:ListItem>
                                                        <asp:ListItem>n</asp:ListItem>
                                                        <asp:ListItem>M</asp:ListItem>
                                                        <asp:ListItem>m</asp:ListItem>
                                                        <asp:ListItem>U</asp:ListItem>
                                                        <asp:ListItem>u</asp:ListItem>
                                                        <asp:ListItem>F</asp:ListItem>
                                                        <asp:ListItem>T</asp:ListItem>
                                                        <asp:ListItem>a</asp:ListItem>
                                                        <asp:ListItem>G</asp:ListItem>
                                                        <asp:ListItem>W</asp:ListItem>
                                                        <asp:ListItem>w</asp:ListItem>
                                                        <asp:ListItem>Z</asp:ListItem>
                                                        <asp:ListItem>E</asp:ListItem>
                                                        
                                                    </asp:DropDownList></td>
                                                    <td><asp:TextBox ID="txt2" style="width:80%;"
                                                    Text='<%#Eval("t2"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt3" style="width:80%;"
                                                    Text='<%#Eval("t3"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt4" style="width:80%;"
                                                    Text='<%#Eval("t4"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt5" style="width:80%;"
                                                    Text='<%#Eval("t5"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox TextMode="MultiLine" Rows="2" ID="txt6" style="width:80px;"
                                                    Text='<%#Eval("t6"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt7" style="width:80%;"
                                                    Text='<%#Eval("t7"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt8" style="width:80%;"
                                                    Text='<%#Eval("t8"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt9" TextMode="MultiLine" Rows="2" style="width:90px;" 
                                                    Text='<%#Eval("t9"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox ID="txt10" style="width:80%;"
                                                    Text='<%#Eval("t10"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox TextMode="MultiLine" Rows="2" ID="txt11" style="width:80px;"
                                                    Text='<%#Eval("t11"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox TextMode="MultiLine" Rows="2" ID="txt12" style="width:80px;"
                                                    Text='<%#Eval("t12"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    <td><asp:TextBox TextMode="MultiLine" Rows="2" ID="txt13" style="width:80px;"
                                                    Text='<%#Eval("t13"%>' runat="server">
                                                    </asp:TextBox></td>
                                                    
                                                    
                                                </tr>
                                            </table>
                                        </asp:Panel>
     
                                        <!-----HoverMenuExtender for displaying update and cancel options------>
                                        <ajaxToolkit:HoverMenuExtender ID="hme2" TargetControlID="panel_TB" 
                                        PopupControlID="panel_updateDelete" PopupPosition="Right" 
                                        HoverDelay="25" runat="server"></ajaxToolkit:HoverMenuExtender>
                                                        
                                    </EditItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
                <ajaxToolkit:TabPanel runat="server" ID="UITab" style="position:relative;" 
                    HeaderText="UI"
                    Enabled="true"
                    ScrollBars="Auto"        
                    OnDemandMode="Always">
                    <ContentTemplate>
                        
                        
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
     
        
        <asp:Button ID="RefreshFormButton" runat="server" Width="0" Height="0" Text="Button" OnClick="RefreshFormButton_Click" />
        <asp:HiddenField ID="HiddenField_lastClicked" Value="0" runat="server" />
        <asp:HiddenField ID="HiddenField_lastClicked_color" Value="white" runat="server" />
        <asp:HiddenField ID="HiddenField_location" Value="~" runat="server" />
        
    </asp:Content>

    JS:

    function Tab_SelectionChanged(sender, e)
            {
                var s = document.getElementById('<%=HiddenField_Update.ClientID%>');
                var hidden_loc = document.getElementById('<%= HiddenField_location.ClientID %>');
                var lastClicked = document.getElementById('<%=HiddenField_lastClicked.ClientID%>');//hidden field- last clicked control
                var lastClicked_id = lastClicked.value;//hidden field value= id of last clicked control
     
                if ((sender.get_activeTabIndex() == 1) || (sender.get_activeTabIndex() == 0 && (hidden_loc.value != "~" || lastClicked_id != "0")))
                {
                    document.getElementById('<%=RefreshFormButton.ClientID%>').click();
                }
    
            }

    c#:

    private void refreshForm()
            {
                Session["FormUpdate"] = "1";
                HiddenField_Update.Value = Session["FormUpdate"].ToString();
                AjaxControlToolkit.TabPanel activeTab = TabContainer1.ActiveTab;
                // use the activeTab
                if (activeTab.ID == "UITab")
                {
                    paramsPanel.Style.Add("display""block");
                }
                else
                {
                    paramsPanel.Style.Add("display""none");
                    updateFields_MovedInUI();
     
                    int i = 0;
                    string lastClickedID = HiddenField_lastClicked.Value.Substring(HiddenField_lastClicked.Value.LastIndexOf("_") + 1);
                    if (lastClickedID != "0" )
                    {
                        if (int.TryParse(lastClickedID, out i))
                        {
                            TabContainer1.ActiveTabIndex = 0;
                            reportsGridView.EditIndex = i - 1;
     
                            BindReportsGrid();
                            addTooltips(reportsGridView.EditIndex);
     
                            reportsGridView.Rows[i - 1].Focus();
     
                            HiddenField_lastClicked.Value = "0";
                        }
                    }
                }
            }

    Wednesday, November 4, 2020 11:45 AM

Answers

  • User-1330468790 posted

    Hi qsoft_developer,

     

    I think you might need to do scroll from javascript side since there are nothing to do with scrolling from code behind.

    One suggestion would be a native javascript function 'scrollIntoView()'.

      

    I construct a simple demo from your codes and you could refer to below codes for more details.

    aspx:

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <input type="button" value="Click" onclick="scrollToDiv()" />
        <asp:Panel runat="server" ID="paramsPanel">
    
    
            <table id="UIMenu" style="visibility: visible;" runat="server">
                <tr>
    
                    <td style="padding-right: 15px;">Index:
                        <asp:TextBox ID="TextBox_Index" runat="server" Enabled="false" Width="25"></asp:TextBox>
                    </td>
                    <td style="padding-right: 15px;">Row:
                        <asp:TextBox ID="TextBox_Row" runat="server" Width="25" Enabled="false"></asp:TextBox>
                    </td>
                    <td style="padding-right: 15px;">Col:
                        <asp:TextBox ID="TextBox_Col" runat="server" Width="25" Enabled="false"></asp:TextBox>
                    </td>
                    <td style="padding-right: 15px;">Name:
                        <asp:TextBox ID="TextBox_Name" runat="server" Width="150" Enabled="false"></asp:TextBox>
                    </td>
                    <td style="padding-right: 15px;">Type:
                        <asp:Label ID="Label_Type" runat="server" Text="" Font-Bold="true" Font-Size="Large"></asp:Label>
                    </td>
    
                </tr>
            </table>
        </asp:Panel>
    
        <ajaxToolkit:TabContainer runat="server" Height="400px" ID="TabContainer1" OnClientActiveTabChanged="Tab_SelectionChanged"
            Width="980px"
            ActiveTabIndex="1"
            OnDemand="true"
            AutoPostBack="false"
            TabStripPlacement="Top"
            ScrollBars="Auto"
            UseVerticalStripPlacement="false"
            VerticalStripWidth="120px">
            <ajaxToolkit:TabPanel runat="server"
                HeaderText="Code"
                Enabled="true"
                ScrollBars="Both"
                OnDemandMode="Once">
                <ContentTemplate>
                    <asp:HiddenField ID="HiddenField_Update" runat="server" Value="1" EnableViewState="true" />
                    <asp:GridView ID="reportsGridView" runat="server" DataKeyNames="t0"
                        AutoGenerateColumns="False" ShowHeader="False" BackColor="#ffffff"
                        GridLines="None" >
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:Panel ID="Panel10" runat="server">
                                        <table id="tbl" style="width: 100%; border-collapse: collapse; table-layout: fixed; display: table; font-size: 14px; margin: 1%; word-wrap: break-word;">
                                            <tr>
                                                <td style="border-bottom: 1px solid #ddd; width: 5%;">
                                                    <asp:Label Font-Bold="true" ID="Label0" runat="server"
                                                        Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t0"))) %>' />
                                                </td>
                                                <td style="border-bottom: 1px solid #ddd; width: 5%;">
                                                    <asp:Label Font-Bold="false" ID="Label1" runat="server"
                                                        Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t1"))) %>' />
                                                </td>
                                                <td style="border-bottom: 1px solid #ddd; width: 5%;">
                                                    <asp:Label Font-Bold="false" ID="Label2" runat="server"
                                                        Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t2"))) %>' />
                                                </td>
                                                <td style="border-bottom: 1px solid #ddd; width: 5%;">
                                                    <asp:Label Font-Bold="false" ID="Label3" runat="server"
                                                        Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t3"))) %>' />
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                                    
                                </ItemTemplate>
    
                                <EditItemTemplate>
                                    <!-----Panel for displaying the TextBoxes in GridView------>
                                    <asp:Panel ID="panel_TB" runat="server" Style="width: 90%;">
                                        <table runat="server" id="updateValsTbl" border="1" style="border-collapse: collapse; width: 100%;">
                                            <tr>
                                                <th style="width: 5%;">No.</th>
                                                <th style="width: 5%;">(1)Type</th>
                                                <th style="width: 5%;">(2)Row</th>
                                                <th style="width: 5%;">(3)Col</th>
                                            </tr>
                                            <tr style="background-color: beige;">
                                                <td>
                                                    <asp:Label Font-Bold="true" ID="txt0" runat="server"
                                                        Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("t0"))) %>' /></td>
                                                <td>
                                                    <asp:DropDownList ID="txt1" runat="server"  Style="width: 80%;"
                                                        SelectedValue='<%# Eval("t1") %>'>
                                                        <asp:ListItem>x</asp:ListItem>
                                                        <asp:ListItem>B</asp:ListItem>
                                                        <asp:ListItem>b</asp:ListItem>
                                                        <asp:ListItem>P</asp:ListItem>
                                                        <asp:ListItem>S</asp:ListItem>
                                                        <asp:ListItem>s</asp:ListItem>
                                                        <asp:ListItem>V</asp:ListItem>
                                                        <asp:ListItem>v</asp:ListItem>
                                                        <asp:ListItem>D</asp:ListItem>
                                                        <asp:ListItem>d</asp:ListItem>
                                                        <asp:ListItem>H</asp:ListItem>
                                                        <asp:ListItem>C</asp:ListItem>
                                                        <asp:ListItem>c</asp:ListItem>
                                                        <asp:ListItem>Q</asp:ListItem>
                                                        <asp:ListItem>q</asp:ListItem>
                                                        <asp:ListItem>Q*</asp:ListItem>
                                                        <asp:ListItem>r</asp:ListItem>
                                                        <asp:ListItem>L</asp:ListItem>
                                                        <asp:ListItem>N</asp:ListItem>
                                                        <asp:ListItem>n</asp:ListItem>
                                                        <asp:ListItem>M</asp:ListItem>
                                                        <asp:ListItem>m</asp:ListItem>
                                                        <asp:ListItem>U</asp:ListItem>
                                                        <asp:ListItem>u</asp:ListItem>
                                                        <asp:ListItem>F</asp:ListItem>
                                                        <asp:ListItem>T</asp:ListItem>
                                                        <asp:ListItem>a</asp:ListItem>
                                                        <asp:ListItem>G</asp:ListItem>
                                                        <asp:ListItem>W</asp:ListItem>
                                                        <asp:ListItem>w</asp:ListItem>
                                                        <asp:ListItem>Z</asp:ListItem>
                                                        <asp:ListItem>E</asp:ListItem>
    
                                                    </asp:DropDownList></td>
                                                <td>
                                                    <asp:TextBox ID="txt2" Style="width: 80%;"
                                                        Text='<%#Eval("t2") %>' runat="server">
                                                    </asp:TextBox></td>
                                                <td>
                                                    <asp:TextBox ID="txt3" Style="width: 80%;"
                                                        Text='<%#Eval("t3") %>' runat="server">
                                                    </asp:TextBox></td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
    
                                  
    
                                </EditItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="UITab" Style=";"
                HeaderText="UI"
                Enabled="true"
                ScrollBars="Auto"
                OnDemandMode="Always">
                <ContentTemplate>
                    <label>Simulation Hidden Field:</label> <asp:TextBox ID="hf_select" runat="server"></asp:TextBox> 
                    <br />
                    <input type="text" id="selectIndex" /><input type="button" value="Set Index" onclick="setIndex()" />
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
    
    
        <asp:Button ID="RefreshFormButton" runat="server" Width="0" Height="0" Text="Button" OnClick="RefreshFormButton_Click" />
        <script>
            
    
    
            function Tab_SelectionChanged(sender, e) {
                document.getElementById('<%=RefreshFormButton.ClientID%>').click();
            }
    
            function setIndex() {
                $('#<%=hf_select.ClientID%>').val($('#selectIndex').val());
    
            }

    // Similar to document ready but more suitable for webforms framework Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(scrollToDiv); function scrollToDiv(){
    // the edit row would be a panel with id which contains 'panel_TB' as a part of server id var panel = document.querySelector('[id*="panel_TB"]'); if (panel) { // You could add some options like: {behavior: "smooth"} to scrollIntoView() panel.scrollIntoView(); } };
    </script> </asp:Content>

    Code behind: (50 rows of data)

    // Simulation of the data
            private static DataTable _gridviewDT;
            public static DataTable GridviewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("T0", typeof(string));
                        _gridviewDT.Columns.Add("T1", typeof(string));
                        _gridviewDT.Columns.Add("T2", typeof(string));
                        _gridviewDT.Columns.Add("T3", typeof(string));
    
                        for(int i = 0; i< 50; i++)
                        {
                            _gridviewDT.Rows.Add(i,"x","T2_"+i, "T3_"+i);
                        }
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindReportsGrid();
                }
            }
    
            protected void BindReportsGrid()
            {
                reportsGridView.DataSource = GridviewDT;
                reportsGridView.DataBind();
            }
    
            protected void RefreshFormButton_Click(object sender, EventArgs e)
            {
                // Have not constructed complex validation for hf_select
                string rowIndex = hf_select.Text == "" ? "1": hf_select.Text;
                int i = 0;
                int.TryParse(rowIndex, out i);
                reportsGridView.EditIndex = i-1;
                BindReportsGrid();
                reportsGridView.Rows[i - 1].Focus();
            }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 5, 2020 8:15 AM