Few months ago I wrote an example
about Dynamically Adding TextBox
Control to ASPNET Table.
As a recap that example demonstrate how to generate rows of TextBoxes in a
Table control based on the number of rows and number of columns provided and as
well as print the values entered by the user using the Request.Forms collections.. Recently,one of the user is asking if
how are we going to accomplish the same thing by generating the TextBox in the
Table based on the data from the database. So in this post I'm going to
demonstrate an example on how to do it.
Okay to get started lets go a head
and set up our WebForm. I have used master page in this example so the
mark up would look something like this:
<asp:Content
ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content
ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:PlaceHolder
ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</asp:Content>
As you can see there's nothing fancy
in the mark up above. It just contain a PlaceHolder control in which we will
add the dynamic table on it. Now lets flip to code behind page.
Here are the full code blocks below:
private DataTable FillData() {
DataTable dt = new DataTable();
DataRow dr = null;
//Create DataTable columns
dt.Columns.Add(new DataColumn("RowNumber",
typeof(string)));
dt.Columns.Add(new DataColumn("Col1",
typeof(string)));
dt.Columns.Add(new DataColumn("Col2",
typeof(string)));
dt.Columns.Add(new DataColumn("Col3",
typeof(string)));
dt.Columns.Add(new DataColumn("Col4",
typeof(string)));
//Create Row for each columns
dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Col1"] = "A";
dr["Col2"] = "B";
dr["Col3"] = "C";
dr["Col4"] = "D";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 2;
dr["Col1"] = "AA";
dr["Col2"] = "BB";
dr["Col3"] = "CC";
dr["Col4"] = "DD";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 3;
dr["Col1"] = "A";
dr["Col2"] = "B";
dr["Col3"] = "CC";
dr["Col4"] = "DD";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 4;
dr["Col1"] = "A";
dr["Col2"] = "B";
dr["Col3"] = "CC";
dr["Col4"] = "DD";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 5;
dr["Col1"] = "A";
dr["Col2"] = "B";
dr["Col3"] = "CC";
dr["Col4"] = "DD";
dt.Rows.Add(dr);
return dt;
}
private void GenerateTable(DataTable
dtSource) {
int rowsCount =
dtSource.Rows.Count;
int colsCount =
dtSource.Columns.Count;
//Creat the Table and Add it to the
Page
Table table = new Table();
table.ID = "Table1";
// Add the dynamic table to the
PlaceHolder control
PlaceHolder1.Controls.Add(table);
// Now iterate through the
datatable and add the controls
for (int rowIndex = 0; rowIndex
< rowsCount; rowIndex++) {
TableRow row = new TableRow();
for (int colIndex = 0; colIndex
< colsCount; colIndex++) {
TableCell cell = new
TableCell();
TextBox tb = new TextBox();
// Set a unique ID for each
TextBox added
tb.ID = "TextBoxRow_"
+ rowIndex + "Col_" + colIndex;
// Assign value for each
TextBox added
tb.Text =
dtSource.Rows[rowIndex][colIndex].ToString();
// Add the control to the
TableCell
cell.Controls.Add(tb);
// Add the TableCell to the
TableRow
row.Cells.Add(cell);
}
// After the columns iteration,
add the TableRow to the Table
table.Rows.Add(row);
}
}
protected
void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GenerateTable(FillData());
}
}
The
code above have two main Methods which are the FillData() and GenerateTable().
The FillData() method is a method that returns a DataTable. If you notice I
just fill the DataTable with a dummy data just for the purpose of this demo. In
case you want to grab the data from the Database then you can replace the
implementation of the FillData() method. You can use DataTable and SqlDataAdapter. Assign a select command to your SqlDataAdapter and then
callSqlDataAdapter .Fill method. This would populate the desired data into
yourDataTable . Here's a quick example below for your reference:
private DataTable FillData() {
DataTable dt = new DataTable();
using (SqlConnection connection = new
SqlConnection("Your Connection String")) {
try {
connection.Open();
string spName = "YOURStoredProcudureName";
SqlCommand sqlCmd = new
SqlCommand(spName, connection);
SqlDataAdapter sqlDa = new
SqlDataAdapter(sqlCmd);
sqlCmd.CommandType =
CommandType.StoredProcedure;
sqlDa.Fill(dt);
if (dt.Rows.Count > 0) {
return dt;
}
}
finally {
connection.Close();
}
return dt;
}
}
That
simple. Now, the GenerateTable() method handles the generation of dynamic
texboxes in the Table control. This method will generate rows of TextBoxes
based on the row count and column count of the DataTable source. I have
included some comments on that method to help you undertand the code.
Comments
Post a Comment