title: Column sum of multiple columns of dynamic gridview using Javascript
body: <p>I have a Dynamic asp Gridview with all columns as template feild TextBox. The columns of the Gridview are also dynamic and column count may vary everytime.</p>
  
  <p>Please find code below</p>
  
  <pre><code>public void FillPoDetails()
  {
      DataTable dt = new DataTable();           
      dt = pmdata.createdatatable(int.Parse(Session["OurStyleid"].ToString()), int.Parse(Session["PoPackid"].ToString()));
      GenerateTable(dt.Columns.Count, dt.Rows.Count,dt);
      foreach (DataColumn col in dt.Columns)
      {
          //Declare the bound field and allocate memory for the bound field.
          TemplateField bfield = new TemplateField();
  
          //Initalize the DataField value.
          bfield.HeaderTemplate = new ArtWebApp.Controls.GridViewTemplate(ListItemType.Header, col.ColumnName);
  
          //Initialize the HeaderText field value.
          bfield.ItemTemplate = new ArtWebApp.Controls.GridViewTemplate(ListItemType.Item, col.ColumnName);
  
          //Add the newly created bound field to the GridView.
          GrdDynamic.Columns.Add(bfield);
      }
      GrdDynamic.DataSource = dt;    
      GrdDynamic.DataBind();  
  }
  public GridViewTemplate(ListItemType type, string colname)
  {
      //Stores the template type.
      _templateType = type;
  
      //Stores the column name.
      _columnName = colname;
  }
  
  void ITemplate.InstantiateIn(System.Web.UI.Control container)
  {
      switch (_templateType)
      {
          case ListItemType.Header:
              //Creates a new label control and add it to the container.
              Label lbl = new Label();            
              //Allocates the new label object.
              lbl.Text = _columnName;
              lbl.CssClass = "Headerclass";
              //Assigns the name of the column in the lable.
              container.Controls.Add(lbl);        
              //Adds the newly created label control to the container.
              break;
          case ListItemType.Item:
              //Creates a new text box control and add it to the container.
              TextBox tb1 = new TextBox();                            
              //Allocates the new text box object.
              tb1.DataBinding += new EventHandler(tb1_DataBinding);    
              //Attaches the data binding event.
              tb1.Columns =6;
              //Creates a column with size 4.
              // tb1.Width = System.Web.UI.WebControls.Unit.Percentage(100);
              tb1.Width = 100;
              tb1.Wrap = true;
              tb1.ID = "txt_" + _columnName;
              if(_columnName== "ColorTotal")
              {
                  tb1.CssClass = "ColorTotal";
              }
              else if (_columnName == "Color")
              {
                  tb1.CssClass = "Color";
              }
              else
              {
                  tb1.CssClass = "txtCalQty";
                  tb1.Attributes.Add("onkeypress", "return isNumberKey(event,this)");
                  tb1.Attributes.Add("onkeyup", "sumofQty(this)");
              }                       
              container.Controls.Add(tb1);                            
              //Adds the newly created textbox to the container.  
              break;
      }
  }
  </code></pre>
  
  <p>And inorder to get the  row total I had added a Javascript function on keydown event and its working clearly</p>
  
  <pre><code> //calculate the sum of qty on keypress
     function sumofQty(objText) {
  
  
         var cell = objText.parentNode;
  
         var row = cell.parentNode;
  
         var sum = 0;
         var textboxs = row.getElementsByClassName("txtCalQty");
  
         for (var i = 0; i &lt; textboxs.length; i++)
         {
             sum += parseFloat(textboxs[i].value);
         }
         var textboxtotalqtys = row.getElementsByClassName("ColorTotal");
         textboxtotalqtys[0].value = sum.toString();         
  
     }
  </code></pre>
  
  <p>And the result is Like below
  <a href="https://i.stack.imgur.com/tFhZC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tFhZC.png" alt="enter image description here"></a></p>
  
  <p>can anyone please help me in finding out the sum of each columns(all same cssclass).and display it in the Sizetotal row because I am not able to loop through columns</p>