ASP.NET - add two rows values in dynamically created table

Asked By anbu n on 31-Oct-11 05:59 AM


in above image . its dynamically created table with textbox in a pop up, here if the user adds first value in 1 year leasing cost or capital reserves ... the third row total capex has to get populated with sum of above two rows. this is a dynamically created table structure.

below is the code which creates above dynamic table

private void CreateDynamicTable()      
    {
      try
      {

        this.pnlPopup.FindControl("PlaceHolder1").Controls.Clear();       
        


        // Fetch the number of Rows and Columns for the table
     

        // Create a Table and set its properties


        Table tbl = new Table();
        tbl.ID = "tblDynamic";        
        tbl.BorderWidth = 1;
        tbl.GridLines = (GridLines)3; // no. 3 means --> GridLines="Both"
        tbl.Attributes["runat"] = "server";        
        
        // Add the table to the placeholder control
        

        for (int i = 0; i < 3; i++)
        {
          TableRow tr = new TableRow();
          TableCell tc_1 = new TableCell();
          Label lbl = new Label();       


          if (i == 0)
          {
            tc_1.ID  ="dyn"+ i + "," + 0;
            lbl.ID = "lblRow_" + i + "Col_" + 00;
            lbl.Text = "CapEx";
          }
          else if (i == 1)
          {
            tc_1.ID = "dyn" + i + "," + 0;
            lbl.ID = "lblRow_" + i + "Col_" + 00;
            lbl.Text = "Leasing Costs";
          }
          else if (i == 2)
          {
            tc_1.ID = "dyn" + i + "," + 0;
            lbl.ID = "lblRow_" + i + "Col_" + 00;
            lbl.Text = "Capital Reserves";
          }

          tc_1.Controls.Add(lbl);
          tr.Cells.Add(tc_1);

          for (int j = 0; j < Convert.ToInt32(txtValperiod.Text); j++)
          {
            TableCell tc = new TableCell();       

            TextBox txtBox = new TextBox();
            Label lbl_1 = new Label();

            if (i == 0 )
            {
             lbl_1.Text = j + 1 + "year";

              tc.ID = "dy" + i + "," + j;
              tc.Controls.Add(lbl_1);
              tr.Cells.Add(tc);

            }
            else
            {
              // Set a unique ID for each TextBox added

              txtBox.ID = "TextBoxRow_" + i + "Col_" + j;

              txtBox.Width = 50;           

              tc.ID = "dy" + i + "," + j;
              // Add the control to the TableCell
              tc.Controls.Add(txtBox);

              // Add the TableCell to the TableRow
              tr.Cells.Add(tc);
            }
          }
          // Add the TableRow to the Table
          tbl.Rows.Add(tr);
        }

        this.pnlPopup.FindControl("PlaceHolder1").Controls.Add(tbl);
         


        // This parameter helps determine in the LoadViewState event,
        // whether to recreate the dynamic controls or not

        ViewState["dynamictable"] = true;
      }
      catch (Exception ex)
      {
      
      
      }
    }

smr replied to anbu n on 31-Oct-11 06:06 AM
hi

try this

//add a new row to the table
function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();
   
    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
   
    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";
   
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
   
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>  <input" +
            " type='button' value='Delete' onclick='removeRow(this);'/>";  
}
  
//deletes the specified row from the table
function removeRow(src)
{
    /* src refers to the input button that was clicked.
     to get a reference to the containing <tr> element,
     get the parent of the parent (in this case <tr>)
    */
  
    var oRow = src.parentElement.parentElement; 
   
    //once the row reference is obtained, delete it passing in its rowIndex  
    document.all("tblGrid").deleteRow(oRow.rowIndex); 

}


follow
http://www.codeproject.com/KB/scripting/DHTMLGrid.aspx
Reena Jain replied to anbu n on 31-Oct-11 09:50 AM
Hi,

Here is function which will create table dynamically

private void CreateDynamicTable()
{
  PlaceHolder1.Controls.Clear();
  
  // Fetch the number of Rows and Columns for the table
  // using the properties
  int tblRows = Rows;
  int tblCols = Columns;
  // Create a Table and set its properties
  Table tbl = new Table();
  // Add the table to the placeholder control
  PlaceHolder1.Controls.Add(tbl);
  // Now iterate through the table and add your controls
  for (int i = 0; i < tblRows; i++)
  {
  TableRow tr = new TableRow();
  for (int j = 0; j < tblCols; j++)
  {
    TableCell tc = new TableCell();
    TextBox txtBox = new TextBox();
    txtBox.Text = "RowNo:" + i + " " + "ColumnNo:" + " " + j;
    // Add the control to the TableCell
    tc.Controls.Add(txtBox);
    // Add the TableCell to the TableRow
    tr.Cells.Add(tc);
  }
  // Add the TableRow to the Table
  tbl.Rows.Add(tr);
  }
  
}