This is a simple solution to a simple problem. It shows an ASP
GridView which when rendered in HTML expands row by row when needed. In other words, it's
GridView expand on-demand.
A coworker asked about having a
GridView which would have rows dynamically show as long as the user keeps entering or editing data. There were ideas about using AJAX for it or other new fancy technologies. However, since on each new line adding, no new server data is required, I thought that this problem could be solved with lesser effort.
How the code works
*Since it's done in VS 2008, some syntax may be different.
var s = parseInt(what.id.substring(what.id.search("\\d")));
As you can see from the code, it doesn't add the next line, but makes it visible, through changing its
CssClass. Prior to that, however, you have to make it invisible.
Rows are rendered in HTML as
<TR>. In order to make a
<TR> invisible, we can't use "
visibility:hidden", nor can we use "
height:0px". None of these would do the job. Only "
When each table row is bound, we format it appropriately and set its
CssClass value to "
trInvisible". Read comments in the code:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
e.Row.ID = (this.j).ToString();
TextBox txtLastControlInRow =
if (txtLastControlInRow != null)
if (this.j > 1)
e.Row.CssClass = "trInvisible";
this.j = this.j + 1;
Before the table could be bound, we create a sample one:
private DataTable CreateFooTable()
DataTable dt = new DataTable();
int i = 1;
for (i=1; i <= 20; i++)
dt.Rows.Add(i, "Foo Item " + i.ToString());
Points of interest
- It's a nice little exercise for using a combination of various technologies.
- Only "
display:none" will make a table row invisible.