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:
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 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>
Member
142 Points
449 Posts
Textbox in repeater takes two tab clicks to move to next line
Dec 13, 2016 07:35 AM|acmedeepak|LINK
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
Star
8131 Points
2415 Posts
Re: Textbox in repeater takes two tab clicks to move to next line
Dec 14, 2016 09:57 AM|Brando ZWZ|LINK
Hi acmedeepak,
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