locked
Repeater textbox to position on top when focused on it RRS feed

  • Question

  • User1182587605 posted

    In my repeater, I have a row of textboxes. If I am entering 200 records, obviously maybe 10 or 15 will be seen on screen, The cursor moves to the next textbox row but that is overlapped by my footer.So, I need to push the repeater(old row) one column up when a new textbox row activates by tab click so that the active row is shown on the screen always if navigating from top or bottom. I need to place the active row on top of the display section at any time on the repeater. Please check my code and suggest me some workarounds on this. My code is:

    <asp:Repeater ID="Repeater2" OnItemCommand="Repeater2_ItemCommand" runat="server" OnItemDataBound="Repeater2_ItemDataBound">                                                            
                                                                <ItemTemplate>
                                                                    <tr>
                                                                        <td>
                                                                            <asp:TextBox ID="ItemId" class="form-control" runat="server" AutoPostBack="true" OnTextChanged="ItemId_TextChanged" Width="150" Text='' onkeydown="EnterToTab()"></asp:TextBox>
                                                                        </td>
                                                                        <td>
                                                                            <asp:TextBox ID="ItemName" class="form-control" runat="server" Text='' ReadOnly="True" Width="350"></asp:TextBox>
                                                                        </td>
                                                                        <td>
                                                                            <asp:TextBox ID="Qnty" runat="server" Text='' OnTextChanged="Qnty_TextChanged" AutoPostBack="true" Width="150" Style="text-align: right" class="form-control" onkeydown="EnterToTab()"></asp:TextBox>
                                                                        </td>
                                                                        <td>
                                                                            <asp:TextBox ID="Cost" class="form-control" runat="server" Text='' Width="150" Style="text-align: right" ReadOnly="True"> </asp:TextBox>
                                                                        </td>
                                                                        <td>
                                                                            <asp:TextBox ID="Value" runat="server" class="form-control" Text='' Width="150" Placeholder="AutoCalculated" Style="text-align: right" ReadOnly="True"></asp:TextBox>
                                                                        </td>
                                                                    </tr>
                                                                </ItemTemplate>                                                             
                                                                <FooterTemplate>                                                                
                                                                    <tr>
                                                                        <td>
                                                                            <asp:Label runat="server" class="control-label col-sm-3 col-md-3 col-lg-3" ID="Label13" Width="150" Style="text-align: center" Text="" Font-Size="Small"></asp:Label></td>
                                                                        <td>
                                                                            <asp:Label runat="server" ID="Label14" Style="text-align: right" class="" Text="" Width="350" Font-Size="Small"></asp:Label></td>
                                                                        <td>
                                                                            <asp:Label runat="server" ID="Label15" Style="text-align: right" class="" Text="" Width="150" Font-Size="Small"></asp:Label></td>
                                                                        <td>                                                                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button runat="server" ID="Button2" Text="Save" class="btn btn-dark-blue" Style="text-align: center" Width="100" CommandName="UpdateDatabase" OnClick="Button2_Click" TabIndex="1000"></asp:Button>
                                                                        </td>
                                                                    </tr>                                                            </FooterTemplate>
    
                                                            </asp:Repeater>

    I need to take the active textbox row and show it on top by moving the repeater up in positioning. I need to push the repeater(old row) one column up when a new textbox row activates by tab click so that the active row is shown on the screen always if navigating from top or bottom. Please help me in this

    Wednesday, February 8, 2017 7:45 AM

Answers

  • User-707554951 posted

    Hi acmedeepak,

    Please try to use $(window).scrollTop().

      <script>
            function moveup(x) {
               $(window).scrollTop($("#"+x.id).offset().top);
            }
    </script>
    
    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:TextBox ID="ItemId" onfocus="moveup(this);" class="form-control" runat="server" AutoPostBack="true" OnTextChanged="ItemId_TextChanged" Width="150" Text='' onkeydown="EnterToTab()"></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="ItemName" onfocus="moveup(this);" class="form-control" runat="server" Text='' ReadOnly="True" Width="350"></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="Qnty" onfocus="moveup(this);" runat="server" Text='' OnTextChanged="Qnty_TextChanged" AutoPostBack="true" Width="150" Style="text-align: right" class="form-control" onkeydown="EnterToTab()"></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="Cost" onfocus="moveup(this);" class="form-control" runat="server" Text='' Width="150" Style="text-align: right" ReadOnly="True"> </asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="Value" onfocus="moveup(this);"  runat="server" class="form-control" Text='' Width="150" Placeholder="AutoCalculated" Style="text-align: right" ReadOnly="True"></asp:TextBox>
                            </td>
                        </tr>
                    </ItemTemplate>
    
    
    

    Best Regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 9, 2017 6:13 AM