Dynamically Add rows/columns to existing table using C#
Hi I am trying to add a row and 3 columns to an exiting table on the page. Once the user clicks the add new row button, the table (eg tblLoanTypes) needs to add a row to the existing table with three columns (Columns 1 has a drop down, ciolumns 2 and 3 have text boxes.) At the start of the page, one row is displayed by default and the user can add / remove more rows at their discretion.
The problem I am facing is that the user can add one row easily, but any attempts to add rows after that overwrites the previously added row hence displaying only two rows on the page regardless of the number of rows added.
I have been scratching my head on this for a while now and any help would really be appreciated.
Thanks.
HTML code:
<table cellpadding="3" cellspacing="3" runat="server">
<tr>
<td style="font-family:Courier New; font-size:12pt;"><b>Loan Type</b></td>
<td style="font-family:Courier New; font-size:12pt;"><b>Amount Owing</b></td>
<td style="font-family:Courier New; font-size:12pt;"><b>Monthly Repayments</b></td>
</tr>
</table>
<asp:Table ID="tblLoanTypes" runat="server" CellPadding="3" CellSpacing="3" Width="100%">
<asp:TableRow>
<asp:TableCell>
<select name="loanType1" id="loanType1" class="txtNormalDrp" runat="server">
<option value="" selected="selected">Please Select</option>
<option value="Home Loan">Home Loan</option>
<option value="Investment Loan">Investment Loan</option>
<option value="Credit Card">Credit Card</option>
<option value="Personal Loan">Personal Loan</option>
<option value="Store Cards">Store Cards</option>
<option value="Tax Debt">Tax Debt</option>
<option value="Other">Other</option>
</select>
</asp:TableCell>
<asp:TableCell>
<input type="text" class="txtBalrepayments" name="balance1" id="balance1" onfocusout="fcnAddTotals();" onkeypress="return numbersonly(event, false)" />
</asp:TableCell>
<asp:TableCell>
<input type="text" class="txtBalrepayments" name="mRepayments1" id="mRepayments1" onfocusout="fcnAddPayments();" onkeypress="return numbersonly(event, false)" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell></asp:TableCell>
<asp:TableCell></asp:TableCell>
<asp:TableCell></asp:TableCell>
</asp:TableRow>
</asp:Table>
<table>
<tr>
<td><asp:ImageButton ID="iBtnAddRow" runat="server"
ImageUrl="images/btnAddRows.jpg" onclick="iBtnAddRow_Click" /> <asp:ImageButton
ID="iBtnRemoveRow" runat="server" ImageUrl="images/btnRemoveRows.jpg"
onclick="iBtnRemoveRow_Click" />
</td>
</tr>
</table>
Back End Code:
protected void iBtnAddRow_Click(object sender, ImageClickEventArgs e)
{
int iIndex = Convert.ToInt32(Session["iKeyIndex"]);
iIndex = iIndex+1;
//Instantiate and create new items
TableRow rTableRow = new TableRow();
TableCell cTableCellLoanTypeDropDown = new TableCell();
TableCell cTableCellBalance = new TableCell();
TableCell cTableCellMonthlyRepayments = new TableCell();
HtmlSelect hSelect = new HtmlSelect();
TextBox txtBalance = new TextBox();
TextBox txtRepayments = new TextBox();
try
{
///******************** First we create the drop down menu *******************************///
hSelect.Attributes.Add("name", "ctl00_ContentPlaceHolder1loanType" + iIndex);
hSelect.Attributes.Add("id", "ctl00_ContentPlaceHolder1_loanType" + iIndex);
hSelect.Attributes.Add("class", "txtNormalDrp");
hSelect.Attributes.Add("runat", "server");
//Add the selection items to hSelect
ListItem lst = new ListItem("Please Select", "");
lst.Attributes.Add("Selected", "Selected");
hSelect.Items.Add(lst);
ListItem lst1 = new ListItem("Home Loan", "Home Loan");
hSelect.Items.Add(lst1);
ListItem lst2 = new ListItem("Investment Loan", "Investment Loan");
hSelect.Items.Add(lst2);
ListItem lst3 = new ListItem("Credit Card", "Credit Card");
hSelect.Items.Add(lst3);
ListItem lst4 = new ListItem("Personal Loan", "Personal Loan");
hSelect.Items.Add(lst4);
ListItem lst5 = new ListItem("Store Cards", "Store Cards");
hSelect.Items.Add(lst5);
ListItem lst6 = new ListItem("Tax Debt", "Tax Debt");
hSelect.Items.Add(lst6);
ListItem lst7 = new ListItem("Other", "Other");
hSelect.Items.Add(lst7);
//Assign the drop down to the first cell
cTableCellLoanTypeDropDown.Controls.Add(hSelect);
///**************************************************************************************///
///*************** Second we create the Text box for Balance*****************************///
txtBalance.Attributes.Add("class", "txtBalrepayments");
txtBalance.Attributes.Add("name", "balance" + iIndex);
txtBalance.Attributes.Add("id", "balance" + iIndex);
txtBalance.Attributes.Add("onfocusout", "fcnAddTotals();");
txtBalance.Attributes.Add("onkeypress", "return numbersonly(event, false)");
//Assign the textbox to the second column
cTableCellBalance.Controls.Add(txtBalance);
///**************************************************************************************///
///*************** Second we create the Text box for Monthly Repayments******************///
txtRepayments.Attributes.Add("class", "txtBalrepayments");
txtRepayments.Attributes.Add("name", "mRepayments" + iIndex);
txtRepayments.Attributes.Add("id", "mRepayments" + iIndex);
txtRepayments.Attributes.Add("onfocusout", "fcnAddTotals();");
txtRepayments.Attributes.Add("onkeypress", "return numbersonly(event, false)");
//Assign the textbox to the third column
cTableCellMonthlyRepayments.Controls.Add(txtRepayments);
///**************************************************************************************///
///************************************ FINALLY *****************************************///
//Add the Row to the table
//tblLoanTypes.Rows.Insert(iIndex, rTableRow);
tblLoanTypes.Rows.AddAt((tblLoanTypes.Rows.Count-1),rTableRow);
//Add the cells and rows to the table: tblLoanTypes
rTableRow.Cells.Add(cTableCellLoanTypeDropDown);
rTableRow.Cells.Add(cTableCellBalance);
rTableRow.Cells.Add(cTableCellMonthlyRepayments);
//Increase the index and save it to the session variable
Session["iKeyIndex"] = iIndex;
}
catch (Exception sError)
{
string sErr = sError.Message;
}
finally
{
//Flush all the declarations
hSelect.Dispose();
txtBalance.Dispose();
txtRepayments.Dispose();
cTableCellLoanTypeDropDown.Dispose();
cTableCellBalance.Dispose();
cTableCellMonthlyRepayments.Dispose();
rTableRow.Dispose();
}
}
protected void iBtnRemoveRow_Click(object sender, ImageClickEventArgs e)
{
}