locked
Textbox in repeater takes two tab clicks to move to next line RRS feed

  • Question

  • User1182587605 posted

    Hi,

    I have a repeater in my web form, it contains 5 textboxes as a row out of which two are editable and others are readonly. Now, I need to navigate them on tab/Enter click. Now, it works with tab click. The problem is, from item to quantity it takes one tab click to fetch data and navigate. But if I click a tab in qty, my program calculates the Quantity*cost but does not navigate to the next line item textbox. The code is as below:

                                          <ItemTemplate>
                                              <tr>
                                                   <td>                                                                               <asp:TextBox ID="ItemId" class="form-control" runat="server" OnTextChanged="ItemId_TextChanged1" AutoPostBack="true"  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='' Width="150" AutoPostBack="true" style="text-align: right" OnTextChanged="Qnty_TextChanged1" 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>

    My CS code:

     protected void Qnty_TextChanged1(object sender, EventArgs e)
            {
                Int32 sumqty = 0;
                decimal sum = 0;
                try
                {
                    Int32 newNumQty = 0;
                    Decimal totalcost = 0;
                    foreach (RepeaterItem item in Repeater3.Items)
                    {
                        string Qty = ((TextBox)item.FindControl("Qnty")).Text;
                        if (Qty != "")
                        {
                            newNumQty = Convert.ToInt32(Qty);
                            string Cost = ((TextBox)item.FindControl("Cost")).Text;
                            Decimal newNumCost = Convert.ToDecimal(Cost);
                            totalcost = (newNumCost * newNumQty);
                            ((TextBox)item.FindControl("Value")).Text = totalcost.ToString();
                            //sumqty = sumqty + newNumQty;
                            //txtTotalQuantity.Text = sumqty.ToString();
                            sum = sum + totalcost;
                            txtdumpvalue.Text = sum.ToString();
                            lblMessage.Text = "";
                            lblMessage2.Text = "";
                            lblMessage2.CssClass = "";
                            lblMessage.CssClass = "";
                        }
                    }
                }

    Please tell me what I should do to make the cursor change and calculate in one go and also, how to enable tab and enter to make same operation as this is a data entry page.

    Please help me in this,

    Deepak

    Tuesday, December 13, 2016 7:35 AM

Answers

  • User283571144 posted

    Hi acmedeepak,

    Please tell me what I should do to make the cursor change and calculate in one go and also, how to enable tab and enter to make same operation as this is a data entry page.

    According to your description, I suggest you could use jquery keydown function to check the press button.

    Then you could use jquery focus method to focus the right textbox.

    More details, you could refer to follow codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
     
        <script src="../Scripts/jquery-1.12.4.min.js"></script>
        <script>
            var highest = -Infinity;
            var tabindex;
            $(function () {
                tabindex = $("#HiddenField1").val();
                //Focus the right tabindex textbox according to hiddenfield value when pageload
                $("input[type='text']").each(function (index) {
                    if ($(this).attr("tabindex") != null) {
                        if ($(this).attr("tabindex") == tabindex) {
                            $(this).focus();
                        }
                    }
                });
            });
    
            $(document).keydown(function (objEvent) {
                if (objEvent.keyCode == 9 || objEvent.keyCode == 13) {  //tab or enter pressed
                    //  alert("111");
                    //Get the max tabindex
                    $("input[type='text']").each(function (index) {
                        if ($(this).attr("tabindex") != null) {
                            highest = Math.max(highest, parseFloat($(this).attr("tabindex")));
                        }
                    });
                    //Focus the right tabindex textbox
                    $("input[type='text']").each(function (index) {        
                            if ($(this).attr("tabindex") == tabindex) {
                                $(this).focus();
                                tabindex++;
                                $("#HiddenField1").val(tabindex);
                                return false;
                            }
                    });
    
                    //refocus to the tabindex 1 textbox
                    if (highest < tabindex) {
                        tabindex = 1;
                        $("#HiddenField1").val(tabindex);
                    }
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table>
                <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">                
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:TextBox ID="ItemId" class="form-control" runat="server"  OnTextChanged="ItemId_TextChanged" AutoPostBack="true" Width="150" Text='' ></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="ItemName" class="form-control" runat="server" Text='ItemNameReadOnly' ReadOnly="True" Width="350"></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="Qnty" runat="server" Text='' Width="150" AutoPostBack="true" Style="text-align: right"  OnTextChanged="Qnty_TextChanged" class="form-control"  ></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="Cost" class="form-control" runat="server" Text='12' 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>
                </asp:Repeater>
                    </table>
                <asp:HiddenField ID="HiddenField1" runat="server" Value="1" />
                <hr/>
                Total: <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </div>
        </form>
    </body>
    </html>

    Code-behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable d1 = new DataTable();
                    d1.Columns.Add("Id");
                    d1.Rows.Add("1");
                    d1.Rows.Add("2");
                    d1.Rows.Add("3");
                    d1.Rows.Add("4");
                    Repeater1.DataSource = d1;
                    Repeater1.DataBind();
                }     
            }
    
            protected void Qnty_TextChanged(object sender, EventArgs e)
            {
                TextBox tb = (TextBox)sender;
                //Focus to the next textbox
                HiddenField1.Value = (tb.TabIndex + 1).ToString();
                Sum();
    
            }
    
            private void Sum()
            {
                decimal sum = 0;
                Int32 newNumQty = 0;
                Decimal totalcost = 0;
                foreach (RepeaterItem item in Repeater1.Items)
                {
                    string Qty = ((TextBox)item.FindControl("Qnty")).Text;
                    if (Qty != "")
                    {
                        newNumQty = Convert.ToInt32(Qty);
                        string Cost = ((TextBox)item.FindControl("Cost")).Text;
                        Decimal newNumCost = Convert.ToDecimal(Cost);
                        totalcost = (newNumCost * newNumQty);
                        ((TextBox)item.FindControl("Value")).Text = totalcost.ToString();
                        //sumqty = sumqty + newNumQty;
                        //txtTotalQuantity.Text = sumqty.ToString();
                        sum = sum + totalcost;
                        Label1.Text = sum.ToString();
                    }
                }
            }
    
            protected void ItemId_TextChanged(object sender, EventArgs e)
            {
                TextBox tb = (TextBox)sender;
                //Focus to the next textbox
                HiddenField1.Value = (tb.TabIndex + 1).ToString();
                Sum();
            }
    
    
            short i = 1;
            protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                TextBox tb1 = (TextBox)e.Item.FindControl("ItemId");
                tb1.TabIndex = i;
                i++;
                TextBox tb2 = (TextBox)e.Item.FindControl("Qnty");
                tb2.TabIndex = i;
                i++;
    
            }

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 14, 2016 9:57 AM