Blog

Repeater textbox to position on top when focused on it [Answered]RSS

1 reply

Last post Feb 09, 2017 06:13 AM by Cathy Zou

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

acmedeepak

Member

147 Points

454 Posts

Repeater textbox to position on top when focused on it

Feb 08, 2017 07:45 AM|acmedeepak|LINK

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

Cathy Zou

Star

8640 Points

2882 Posts

Re: Repeater textbox to position on top when focused on it

Feb 09, 2017 06:13 AM|Cathy Zou|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›