In an aspx page, I have two textboxes with id Txt_StartDate and Txt_EndDate. I have a dynamic gridview on the page that is displayed based on the values entered in Txt_StartDate and Txt_EndDate. So, for example, if the start date is 23/05/2016 and end date
is 24/07/2018, the gridview will be displayed as follows:
2 columns
Header Text Column 0: Year
Header Text Column 1: Budget Required
Following the header row, there will be three rows to enter budgets for 2016, 2017, and 2018. Years will be displayed in column 0.
Column 1 will have blank text boxes so that the user can enter the amount of budget required.
My requirement is to insert comma in the text boxes after the whole number/integers are entered for the budget required by the user.
I tried to implement the code as mentioned in the following thread:
As you are using the textbox within the data bound gridview control, there will a textbox with unique ID for each row. So you should set the
ClientIDMode of the gridview to "Predictable" along with the
ClientIDRowSuffix to the ID of the textbox(optional). However in this case you can access each textbox control with
"this" of javascript. You will not be able to access the textbox with ID
TextBox1 once the gridview is rendered.
Try with the code below
function InsertComma() {
var txtObj = this; // add the reference to the textbox in the current row context of gridview
var txtVal = replaceAll(txtObj.value, ',', '');
//alert(txtObj.value);
if (txtObj.value != "") {
var newVal = "";
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
txtObj.value = newVal;
}
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'), with_this);
}
function InsertComma() {
var txtObj = this; // add the reference to the textbox in the current row context of gridview
var txtVal = replaceAll(txtObj.value, ',', '');
//alert(txtObj.value);
if (txtObj.value != "") {
var newVal = "";
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
txtObj.value = newVal;
}
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'), with_this);
}
However, before showing the gridview, I got the following error:
DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'TextBox1'.
I receive this error at the following line:
private void AddNewRowToGrid(int year1, int year2)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("budge", typeof(string)));
for (int i = year1; i <= year2; i++)
{
DataRow dr = null;
dr = dt.NewRow();
dr["RowNumber"] = i;
dr["budge"] = "";
dt.Rows.Add(dr);
}
Gridview1.DataSource = dt; Gridview1.DataBind(); //Error is shown here
foreach (GridViewRow row in Gridview1.Rows)
{
((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "InsertComma()");
}
ViewState["CurrentTable"] = dt;
Removing ClientIDRowSuffix="TextBox1" prevented the error. However, when I type numbers in three text boxes, commas are not inserted on keyup.
I checked in View Source. First row has <th> for column headings. Second, third, and fourth rows have <td>. Each grid item row has an input tag with type=text and onkeyup="InsertComma()".
In the <script> section, Insert Comma function is also showing. However, I am not getting comma formatted numbers.
I checked in View Source. First row has <th> for column headings. Second, third, and fourth rows have <td>. Each grid item row has an input tag with type=text and onkeyup="InsertComma()".
In the <script> section, Insert Comma function is also showing. However, I am not getting comma formatted numbers
Can you share the source html here .. also add a breakpoint to the javascript function in the browser debugger toolbar to see whether the function is being called or not.
<script type="text/javascript">
function InsertComma(input) {
var txtVal = replaceAll(input, ',', '');
//alert(input);
if (input != "") {
var newVal = "";
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
return newVal;
}
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'), with_this);
}
</script>
And change below line to the Gridview item add event
Gridview1.DataSource = dt;
Gridview1.DataBind(); //Error is shown here
foreach (GridViewRow row in Gridview1.Rows)
{
((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "this.value=InsertComma(this.value);"); // added this line
}
Gridview1.DataSource = dt;
Gridview1.DataBind();
foreach (GridViewRow row in Gridview1.Rows)
{
((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "this.value=InsertComma(this.value);"); // added this line
}
<asp:gridview ID="Gridview1" runat="server" ClientIDMode="Predictable" AutoGenerateColumns="false">
function InsertComma(input) {
var txtVal = replaceAll(input, ',', '');
//alert(input);
if (input != "") {
var newVal = "";
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
return newVal;
}
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'), with_this);
}
With this code, I started the application. Entered 23/05/2016 as start date and 24/07/2018 as end date. It provided me three text boxes to enter budgets for the year 2016, 2017, and 2018. For the year 2016, I entered 10000. However, it was displayed as 100,00
and not 10,000. Also, after entering 10000, when I pressed tab, undefined was shown for the text box for the year 2017.
However, it was displayed as 100,00 and not 10,000. Also, after entering 10000, when I pressed tab, undefined was shown for the text box for the year 2017.
As for this issue, you could try to move the newVal out of the if statement. Like this:
function InsertComma(input) {
var txtVal = replaceAll(input, ',', '');
//alert(input);
var newVal = "";
if (input != "") {
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
}
return newVal;
}
Beside, in the text box change event, please remember to remove the blank space.
Best regards,
Dillion
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
function InsertComma(input) {
var txtVal = replaceAll(input, ',', '');
//alert(input);
var newVal = "";
if (input != "") {
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
}
return newVal;
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'), with_this);
}
With this, I started the application and entered numbers in three text boxes in gridview. Now, when I pressed tab after entering number in the first text box, I did not receive undefined and the entry typed successfully in the second text box. However, I
am not getting the correct comma formatted numbers as yet. The sample entries that I made resulted in the following output:
100000 changed to 100,000 (ok)
10000 changed to 100,00 (not correct)
1000000 changed to 100,000,0 (not correct)
In essence, commas are being added after three digits from the left. They need to be inserted after three digits from the right.
The properties of TextBox1 in Gridview1 are as follows:
Try with this code to add comma after second digit .. e.g 10000 will become 10,000 . This will only work for digits between 10000 to 99999 . So it depends on your requirement how you need to add comma separator for higher numbers. You need to modify the
function accordingly.
<script type="text/javascript">
function InsertComma(input) {
var txtVal = replaceAll(input, ',', '');
//alert(input);
var newVal = "";
if (input != "") {
for (var i = 0; i < txtVal.length; i++) {
//alert(txtVal.substring(i, 1));
newVal = newVal + txtVal.substring(i, i + 1);
if ((i + 1) == 2 && i != 0 && i + 1 < txtVal.length) {
newVal = newVal + ",";
}
}
}
return newVal;
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'), with_this);
}
</script>
Member
9 Points
33 Posts
insert comma while entering number in a text box in a gridview
Dec 17, 2016 07:26 AM|Shehzad Rattani|LINK
Hello,
In an aspx page, I have two textboxes with id Txt_StartDate and Txt_EndDate. I have a dynamic gridview on the page that is displayed based on the values entered in Txt_StartDate and Txt_EndDate. So, for example, if the start date is 23/05/2016 and end date is 24/07/2018, the gridview will be displayed as follows:
2 columns
Header Text Column 0: Year
Header Text Column 1: Budget Required
Following the header row, there will be three rows to enter budgets for 2016, 2017, and 2018. Years will be displayed in column 0.
Column 1 will have blank text boxes so that the user can enter the amount of budget required.
My requirement is to insert comma in the text boxes after the whole number/integers are entered for the budget required by the user.
I tried to implement the code as mentioned in the following thread:
https://forums.asp.net/t/1743696.aspx
However, when I run the application, I get the following error:
The name 'TextBox1' does not exist in the current context
I receive this error at the following line:
var txtObj = document.getElementById('<%=TextBox1.ClientID %>');
The coding is as follows:
<asp:TextBox ID="Txt_StartDate" runat="server" AutoPostBack="true" OnTextChanged="Date_TextChanged"></asp:TextBox> <asp:TextBox ID="Txt_EndDate" runat="server" AutoPostBack="true" OnTextChanged="Date_TextChanged"></asp:TextBox> protected void Date_TextChanged(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Txt_StartDate.Text) && !string.IsNullOrEmpty(Txt_EndDate.Text)) { DateTime dt1 = DateTime.ParseExact(Txt_StartDate.Text, "dd/MM/yyyy", CultureInfo.InvariantCulture); DateTime dt2 = DateTime.ParseExact(Txt_EndDate.Text, "dd/MM/yyyy", CultureInfo.InvariantCulture); AddNewRowToGrid(dt1.Year, dt2.Year); } } private void AddNewRowToGrid(int year1, int year2) { DataTable dt = new DataTable(); dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); dt.Columns.Add(new DataColumn("budge", typeof(string))); for (int i = year1; i <= year2; i++) { DataRow dr = null; dr = dt.NewRow(); dr["RowNumber"] = i; dr["budge"] = ""; dt.Rows.Add(dr); } Gridview1.DataSource = dt; Gridview1.DataBind(); foreach (GridViewRow row in Gridview1.Rows) { ((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "InsertComma()"); } ViewState["CurrentTable"] = dt; } <asp:gridview ID="Gridview1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="RowNumber" HeaderText="Year" /> <asp:TemplateField HeaderText="Budget Required"> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:gridview> <script type="text/javascript"> function InsertComma() { var txtObj = document.getElementById('<%=TextBox1.ClientID %>'); var txtVal = replaceAll(txtObj.value, ',', ''); //alert(txtObj.value); if (txtObj.value != "") { var newVal = ""; for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } txtObj.value = newVal; } } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); } </script>Regards,
Shehzad
Member
370 Points
137 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 17, 2016 08:37 AM|Nilishere|LINK
As you are using the textbox within the data bound gridview control, there will a textbox with unique ID for each row. So you should set the ClientIDMode of the gridview to "Predictable" along with the ClientIDRowSuffix to the ID of the textbox(optional). However in this case you can access each textbox control with "this" of javascript. You will not be able to access the textbox with ID TextBox1 once the gridview is rendered.
Try with the code below
function InsertComma() { var txtObj = this; // add the reference to the textbox in the current row context of gridview var txtVal = replaceAll(txtObj.value, ',', ''); //alert(txtObj.value); if (txtObj.value != "") { var newVal = ""; for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } txtObj.value = newVal; } } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); }Check the below link for ClientIdMode
https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx
Member
9 Points
33 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 17, 2016 09:41 AM|Shehzad Rattani|LINK
Thanks Nilishere.
I modified the code as follows:
Set the properties of Gridview1 as follows:
Entered the following javascript:
function InsertComma() { var txtObj = this; // add the reference to the textbox in the current row context of gridview var txtVal = replaceAll(txtObj.value, ',', ''); //alert(txtObj.value); if (txtObj.value != "") { var newVal = ""; for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } txtObj.value = newVal; } } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); }However, before showing the gridview, I got the following error:
DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'TextBox1'.
I receive this error at the following line:
private void AddNewRowToGrid(int year1, int year2)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("budge", typeof(string)));
for (int i = year1; i <= year2; i++)
{
DataRow dr = null;
dr = dt.NewRow();
dr["RowNumber"] = i;
dr["budge"] = "";
dt.Rows.Add(dr);
}
Gridview1.DataSource = dt;
Gridview1.DataBind(); //Error is shown here
foreach (GridViewRow row in Gridview1.Rows)
{
((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "InsertComma()");
}
ViewState["CurrentTable"] = dt;
}
Regards,
Shehzad
Member
370 Points
137 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 17, 2016 11:01 AM|Nilishere|LINK
You can try with leaving the ClientIDRowSuffix property as empty like below.
Member
9 Points
33 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 17, 2016 11:42 AM|Shehzad Rattani|LINK
Thanks Nilishere.
Removing ClientIDRowSuffix="TextBox1" prevented the error. However, when I type numbers in three text boxes, commas are not inserted on keyup.
I checked in View Source. First row has <th> for column headings. Second, third, and fourth rows have <td>. Each grid item row has an input tag with type=text and onkeyup="InsertComma()". In the <script> section, Insert Comma function is also showing. However, I am not getting comma formatted numbers.
Regards,
Shehzad
Member
370 Points
137 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 17, 2016 11:59 AM|Nilishere|LINK
Can you share the source html here .. also add a breakpoint to the javascript function in the browser debugger toolbar to see whether the function is being called or not.
Member
370 Points
137 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 17, 2016 12:27 PM|Nilishere|LINK
Try with the below javascript
<script type="text/javascript"> function InsertComma(input) { var txtVal = replaceAll(input, ',', ''); //alert(input); if (input != "") { var newVal = ""; for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } return newVal; } } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); } </script>And change below line to the Gridview item add event
Gridview1.DataSource = dt; Gridview1.DataBind(); //Error is shown here foreach (GridViewRow row in Gridview1.Rows) { ((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "this.value=InsertComma(this.value);"); // added this line }Let me know it is working
Member
9 Points
33 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 19, 2016 05:05 AM|Shehzad Rattani|LINK
Thanks Nilishere.
This code not working as needed.
I updated the code as follows:
Gridview1.DataSource = dt; Gridview1.DataBind(); foreach (GridViewRow row in Gridview1.Rows) { ((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "this.value=InsertComma(this.value);"); // added this line } <asp:gridview ID="Gridview1" runat="server" ClientIDMode="Predictable" AutoGenerateColumns="false"> function InsertComma(input) { var txtVal = replaceAll(input, ',', ''); //alert(input); if (input != "") { var newVal = ""; for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } return newVal; } } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); }With this code, I started the application. Entered 23/05/2016 as start date and 24/07/2018 as end date. It provided me three text boxes to enter budgets for the year 2016, 2017, and 2018. For the year 2016, I entered 10000. However, it was displayed as 100,00 and not 10,000. Also, after entering 10000, when I pressed tab, undefined was shown for the text box for the year 2017.
Regards,
Shehzad
All-Star
45489 Points
7008 Posts
Microsoft
Re: insert comma while entering number in a text box in a gridview
Dec 19, 2016 06:34 AM|Zhi Lv - MSFT|LINK
Hi Shehzad,
As for this issue, you could try to move the newVal out of the if statement. Like this:
function InsertComma(input) { var txtVal = replaceAll(input, ',', ''); //alert(input); var newVal = ""; if (input != "") { for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } } return newVal; }Beside, in the text box change event, please remember to remove the blank space.
Best regards,
Dillion
Member
9 Points
33 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 19, 2016 09:25 AM|Shehzad Rattani|LINK
Thanks Dillion.
I modified the javascript. The modified code is:
function InsertComma(input) { var txtVal = replaceAll(input, ',', ''); //alert(input); var newVal = ""; if (input != "") { for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) % 3 == 0 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } } return newVal; } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); }With this, I started the application and entered numbers in three text boxes in gridview. Now, when I pressed tab after entering number in the first text box, I did not receive undefined and the entry typed successfully in the second text box. However, I am not getting the correct comma formatted numbers as yet. The sample entries that I made resulted in the following output:
100000 changed to 100,000 (ok)
10000 changed to 100,00 (not correct)
1000000 changed to 100,000,0 (not correct)
In essence, commas are being added after three digits from the left. They need to be inserted after three digits from the right.
The properties of TextBox1 in Gridview1 are as follows:
<ItemTemplate> <asp:TextBox style="text-align:right" ID="TextBox1" CssClass="TextBox" autocomplete="off" runat="server" onfocus="TextBoxColor(this,'paleturquoise')" onfocusout="TextBoxColor(this,'white')" ></asp:TextBox> </ItemTemplate>Regards,
Shehzad
Member
370 Points
137 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 19, 2016 10:02 AM|Nilishere|LINK
Try with this code to add comma after second digit .. e.g 10000 will become 10,000 . This will only work for digits between 10000 to 99999 . So it depends on your requirement how you need to add comma separator for higher numbers. You need to modify the function accordingly.
<script type="text/javascript"> function InsertComma(input) { var txtVal = replaceAll(input, ',', ''); //alert(input); var newVal = ""; if (input != "") { for (var i = 0; i < txtVal.length; i++) { //alert(txtVal.substring(i, 1)); newVal = newVal + txtVal.substring(i, i + 1); if ((i + 1) == 2 && i != 0 && i + 1 < txtVal.length) { newVal = newVal + ","; } } } return newVal; } function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'), with_this); } </script>Member
9 Points
33 Posts
Re: insert comma while entering number in a text box in a gridview
Dec 19, 2016 10:57 AM|Shehzad Rattani|LINK
Thanks Nilishere.
I tested this code and is not giving the desired output. With this code:
10000 changed to 10,000 (ok)
100000 changed to 10,0000 (not correct)
1000000 changed to 10,00000 (not correct)
The rule for the comma is: put comma after every three digits from the right, which I did not get.
I tried another code and it worked for me. Code listing is as follows (I also removed ClientIDMode="Predictable" as it worked without it).
<asp:gridview ID="Gridview1" runat="server" AutoGenerateColumns="false"> foreach (GridViewRow row in Gridview1.Rows) { ((TextBox)row.FindControl("TextBox1")).Attributes.Add("onkeyup", "this.value=InsertComma(this.value);"); // added this line } function InsertComma(Num) { //function to add commas to textboxes Num += ''; Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', ''); x = Num.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) x1 = x1.replace(rgx, '$1' + ',' + '$2'); return x1 + x2; }With this code:
1000 changed to 1,000
10000 changed to 10,000
100000 changed to 100,000
1000000 changed to 1,000,000
Also, when inserting the record to the database table, I replaced comma with String.Empty.
foreach (GridViewRow row in Gridview1.Rows) { cmdparams[1].Value = row.Cells[0].Text; cmdparams[2].Value = ((TextBox)row.FindControl("TextBox1")).Text.Replace(",", String.Empty); sql.ExecuteNonQuery(); }Regards,
Shehzad