How do I add rows to a DataList without losing state of controls?

[bryanp10]

I have a DataList on my page which contains multiple DropDownLists. My
page defaults to showing six rows in the DataList. I want the ability
to dynamically add rows if needed. Right now I'm just using an empty
table with X rows, and adding a new row to the table that the DataList
is bound to. However, I can't figure out a way to do this and at the
same time maintain the current viewstate of the existing controls.
When I
call DataList.BindData() to re-bind the list, the state of the
drop-downs and their contents are lost.

HOW do I add a row to the DataList programmatically AND keep the
viewstate? (see the AddRow_Click event below)

It seems odd to have to bind the DataList to an empty table in order to
get my ASPX code to generate rows for the DataList. Is there a better
way to do this?


ASPX code:

<asp:datalist id="QueryGrid" Runat="server" EnableViewState="True">
<HeaderTemplate>
<th>Category</th>
<th>SubCategory</th>
<th>Field</th>
</HeaderTemplate>
<ItemTemplate>
<aspropDownList ID="Category" Runat="server"
DataSource="<%#CategoryDDL%>" DataTextField="category"
DataValueField="categoryID"></aspropDownList>
<aspropDownList ID="SubCategory" Runat="server"
DataSource="<%#SubCatDDL%>" DataTextField="subcat"
DataValueField="subcategoryID"></aspropDownList>
<aspropDownList ID="Field" Runat="server"
DataSource="<%#FieldDDL%>" DataTextField="field"
DataValueField="fieldID"></aspropDownList>
</ItemTemplate>
</asp:datalist>
<asp:Button id="AddRow" Text="Add Condition"
Runat="server"></asp:Button>


(I have simplified the code somewhat though, removing
AutoPostBack=True, EnableViewState=True, and event handlers from the
DropDownList entries)


CODE BEHIND:

/// <summary>
/// Summary description for QueryBuild.
/// </summary>
public class QueryBuild : System.Web.UI.Page, INamingContainer
{
protected DataTable CategoryDDL;
protected DataTable SubCatDDL;
protected DataTable FieldDDL;
protected DataTable ValueDDL;

# region private int gridRows
// Tracks the number of rows we display in the Query Builder
private int gridRows
{
get
{
if( ViewState["gridRows"] != null )
return (int) ViewState["gridRows"];
else
return 0;
}
set
{
ViewState["gridRows"] = value;
}

} // end gridRows
# endregion


private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here

if( !IsPostBack )
{
PopulateDropDowns();

gridRows = 6; // Default Query Builder row size

QueryGrid.DataSource = GetTable();
QueryGrid.DataBind();
}

}

private DataTable GetTable()
{
DataTable grid = new DataTable();

// THIS IS AN EMPTY TABLE -- is there a better way to do this?
for(int rowCount = 0; rowCount < gridRows; rowCount++)
{
grid.Rows.Add( grid.NewRow() );
}

return grid;
}

private void PopulateDropDowns()
{
DataTable paramTable = GetParameterTable();

CategoryDDL = GetCategories(paramTable);
SubCatDDL = GetSubCategories(paramTable, "EMPTY");
FieldDDL = GetFields(paramTable, "EMPTY");
}

private void AddRow_Click(object sender, System.EventArgs e)
{
gridRows++;

//HELP!? How do I programmatically add a row to my DataList without
losing the state of
// the existing drop-downs?

QueryGrid.DataSource = GetTable();
QueryGrid.DataBind(); // this CLEARS my existing state! But if I
don't re-bind, then the
// row will not be added to the DataList
}

}