calculation on the values of text boxes and display result in text box inside grid view RSS

• • Reply
  scala_1988

  Member

  42 Points

  180 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.

• • Reply
  Sean Fang

  Participant

  1950 Points

  579 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