User will input the male and female population and via javascript I have to show the total population in text box txtTotalPopulation using onblur="Calculation()" method.
In many posts I read that grid view text boxes can not be accessed directly, first we need to access the id of grid view. But I am not sure how to do this. How to access the id of the text boxes Please help.
Most of the posts only saying how to access the value of the text box inside grid view but how to assign value to text box in grid view via javascript.
Acording to your description, what you need is a way to access the value from male and female and then you need to assign the sum value to the total input.
As you already knew, the id of the text box inside the grid view will be different from that one you write in the aspx page.
Therefore, the best way to fetch the data in each row will be assign the Calculation function with the current element and use Jquery/javascript to fetch the previous and next element to complete this addition. (Here I use Jquery while javascript can complete
the same thing).
More details, you can refer to below code:
Script:
<script type="text/javascript">
function Calculation(input) {
// female's number
var femaleValue = $(input).val() == '' ? 0 : parseInt($(input).val());
// Current <td> which contains input for female number
var femaleCell = $(input).parent();
// total <td> which contains input for total number
var totalCell = femaleCell.next();
// Male <td> which contains input for male number
var maleCell = femaleCell.prev();
// Get Male number from input
var maleValue = maleCell.find('input').val() == '' ? 0 : parseInt(maleCell.find('input').val());
// Do addtion
var total = maleValue + femaleValue;
//Change the content of the total
totalCell.find('input').val(total);
}
</script>
Code behind: Simulation of the data, not important.
private static DataTable _gridviewDT;
public static DataTable GridViewDT
{
get
{
if (_gridviewDT is null)
{
_gridviewDT = new DataTable();
_gridviewDT.Columns.Add("ID", typeof(int));
_gridviewDT.Columns.Add("STATE", typeof(string));
_gridviewDT.Rows.Add(1,"STATE1");
_gridviewDT.Rows.Add(2,"STATE2");
_gridviewDT.Rows.Add(3,"STATE3");
_gridviewDT.Rows.Add(4,"STATE4");
_gridviewDT.Rows.Add(5,"STATE5");
}
return _gridviewDT;
}
set
{
_gridviewDT = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
}
}
private void BindGridView()
{
gv_Population.DataSource = GridViewDT;
gv_Population.DataBind();
}
Demo:
There might be a better way to trigger the Calculation instead of on blur. However, it would be another topic.
Hope this can help you.
Best regards,
Sean
ASP.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. Learn more >
Member
42 Points
184 Posts
calculation on the values of text boxes and display result in text box inside grid view
Mar 13, 2020 08:20 AM|scala_1988|LINK
I have a grid view with dynamic rows. They have 3 text box columns for input number of MALE, FEMALE and showing the total.
<asp:GridView ID="gv_Population" runat="server" AutoGenerateColumns="false" DataKeyNames="ID"> <Columns> <asp:BoundField DataField="STATE" HeaderText="STATE"></asp:BoundField> <asp:TemplateField HeaderText="Male Population"> <ItemTemplate> <asp:TextBox ID="txtMale" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Female Population"> <ItemTemplate> <asp:TextBox ID="txtFemale" runat="server" onblur="Calculation()" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Total Population"> <ItemTemplate> <asp:TextBox ID="txtTotalPopulation" disabled="disabled" runat="server"/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>User will input the male and female population and via javascript I have to show the total population in text box txtTotalPopulation using onblur="Calculation()" method.
In many posts I read that grid view text boxes can not be accessed directly, first we need to access the id of grid view. But I am not sure how to do this. How to access the id of the text boxes Please help.
https://www.c-sharpcorner.com/blogs/how-to-get-textbox-value-from-gridview-using-javascript1
https://stackoverflow.com/questions/21852729/how-to-get-the-gridview-textbox-control-id-in-javascript
Most of the posts only saying how to access the value of the text box inside grid view but how to assign value to text box in grid view via javascript.
Contributor
2990 Points
880 Posts
Re: calculation on the values of text boxes and display result in text box inside grid view
Mar 13, 2020 11:05 AM|Sean Fang|LINK
Hi, scala_1988,
Acording to your description, what you need is a way to access the value from male and female and then you need to assign the sum value to the total input.
As you already knew, the id of the text box inside the grid view will be different from that one you write in the aspx page.
Therefore, the best way to fetch the data in each row will be assign the Calculation function with the current element and use Jquery/javascript to fetch the previous and next element to complete this addition. (Here I use Jquery while javascript can complete the same thing).
More details, you can refer to below code:
Script:
<script type="text/javascript"> function Calculation(input) { // female's number var femaleValue = $(input).val() == '' ? 0 : parseInt($(input).val()); // Current <td> which contains input for female number var femaleCell = $(input).parent(); // total <td> which contains input for total number var totalCell = femaleCell.next(); // Male <td> which contains input for male number var maleCell = femaleCell.prev(); // Get Male number from input var maleValue = maleCell.find('input').val() == '' ? 0 : parseInt(maleCell.find('input').val()); // Do addtion var total = maleValue + femaleValue; //Change the content of the total totalCell.find('input').val(total); } </script>.aspx Page:
<asp:GridView ID="gv_Population" runat="server" AutoGenerateColumns="false" DataKeyNames="ID"> <Columns> <asp:BoundField DataField="STATE" HeaderText="STATE"></asp:BoundField> <asp:TemplateField HeaderText="Male Population"> <ItemTemplate> <asp:TextBox ID="txtMale" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Female Population"> <ItemTemplate> <asp:TextBox ID="txtFemale" runat="server" onblur="Calculation(this)" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Total Population"> <ItemTemplate> <asp:TextBox ID="txtTotalPopulation" disabled="disabled" runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>Code behind: Simulation of the data, not important.
private static DataTable _gridviewDT; public static DataTable GridViewDT { get { if (_gridviewDT is null) { _gridviewDT = new DataTable(); _gridviewDT.Columns.Add("ID", typeof(int)); _gridviewDT.Columns.Add("STATE", typeof(string)); _gridviewDT.Rows.Add(1,"STATE1"); _gridviewDT.Rows.Add(2,"STATE2"); _gridviewDT.Rows.Add(3,"STATE3"); _gridviewDT.Rows.Add(4,"STATE4"); _gridviewDT.Rows.Add(5,"STATE5"); } return _gridviewDT; } set { _gridviewDT = value; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridView(); } } private void BindGridView() { gv_Population.DataSource = GridViewDT; gv_Population.DataBind(); }Demo:
There might be a better way to trigger the Calculation instead of on blur. However, it would be another topic.
Hope this can help you.
Best regards,
Sean