Visual Web Developer Putting Drowdown Menus in Table Cells

Question

I have created a web page that displays a table. Most of the cells of the table are already filled in but some of them require user input. I would like to put drop down menus in some of these table cells such that the cell will be populated with the selection from the menu and the drop down list will disappear.

I have gotten this to work in a single cell. However, when I tried to get it to work in a second cell everything broke. I have hacked around so much trying to find the problem that I am not even sure I remember how I got the first one working now. :-)

Here is the relevant code:

protected void Page_Load(object sender, EventArgs e)
{

    // Create a DropDownList control.
    DropDownList DropList = new DropDownList();

    // Set the properties for the DropDownList control.
    DropList.ID = "TrendList";
    DropList.AutoPostBack = true;

    // Manually register the event-handling method for the 
    // SelectedIndexChanged event.
    DropList.SelectedIndexChanged += new EventHandler(this.Selection_Change);

    // Because the DropDownList control is created dynamically each
    // time the page is loaded, the data must be bound to the
    // control each time the page is refreshed.

    // Specify the data source and field names for the Text and 
    // Value properties of the items (ListItem objects) in the
    // DropDownList control.
    DropList.DataSource = CreateDataSource();
    DropList.DataTextField = "ColorTextField";
    DropList.DataValueField = "ColorValueField";

    // Bind the data to the control.
    DropList.DataBind();

    // Set the default selected item when the page is first loaded.
    if (!IsPostBack)
    {
        DropList.SelectedIndex = 0;
    }

    // Add the DropDownList control to the Controls collection of 
    // the PlaceHolder control.
    p1.Controls.Add(DropList);
    p2.Controls.Add(DropList);
}

ICollection CreateDataSource()
{

    // Create a table to store data for the DropDownList control.
    DataTable dt = new DataTable();

    // Define the columns of the table.
    dt.Columns.Add(new DataColumn("ColorTextField", typeof(String)));
    dt.Columns.Add(new DataColumn("ColorValueField", typeof(String)));

    // Populate the table with sample values.
    dt.Rows.Add(CreateRow("GreenUp", "GreenUp", dt));
    dt.Rows.Add(CreateRow("GreenFlat", "GreenFlat", dt));
    dt.Rows.Add(CreateRow("GreenDown", "GreenDown", dt));
    dt.Rows.Add(CreateRow("YellowUp", "YellowUp", dt));
    dt.Rows.Add(CreateRow("YellowFlat", "YellowFlat", dt));
    dt.Rows.Add(CreateRow("YellowDown", "YellowDown", dt));
    dt.Rows.Add(CreateRow("RedUp", "RedUp", dt));
    dt.Rows.Add(CreateRow("RedFlat", "RedFlat", dt));
    dt.Rows.Add(CreateRow("RedDown", "RedDown", dt));
    dt.Rows.Add(CreateRow("ClearUp", "ClearUp", dt));
    dt.Rows.Add(CreateRow("ClearFlat", "ClearFlat", dt));
    dt.Rows.Add(CreateRow("ClearDown", "ClearDown", dt));

    // Create a DataView from the DataTable to act as the data source
    // for the DropDownList control.
    DataView dv = new DataView(dt);
    return dv;

}

DataRow CreateRow(String Text, String Value, DataTable dt)
{

    // Create a DataRow using the DataTable defined in the 
    // CreateDataSource method.
    DataRow dr = dt.NewRow();

    // This DataRow contains the ColorTextField and ColorValueField 
    // fields, as defined in the CreateDataSource method. Set the 
    // fields with the appropriate value. Remember that column 0 
    // is defined as ColorTextField, and column 1 is defined as 
    // ColorValueField.
    dr[0] = Text;
    dr[1] = Value;

    return dr;
}

void Selection_Change(Object sender, EventArgs e)
{
    // Retrieve the DropDownList control from the Controls
    // collection of the PlaceHolder control.
    DropDownList DropList1 = (DropDownList)p1.FindControl("TrendList");
    DropDownList DropList2 = (DropDownList)p2.FindControl("TrendList");
    switch (sender.ToString())
    {
        case "p1":
            s1.InnerHtml = DropList1.SelectedItem.Value;
            break;
        case "p2":
            s2.InnerHtml = DropList2.SelectedItem.Value;
            break;
    }
}

And here is the relevant snippet from the table:

<td><span id="s1" runat="server"><asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder></span>
<td><span id="s2" runat="server"><asp:PlaceHolder ID="p2" runat="server"></asp:PlaceHolder></span>

Now I realize that the switch control is all wrong since sender does not represent the id of the caller. But I need some way to distinguish which drop down menu is the caller so I know which HTML to replace. Also, I can only get one drop down menu to display at a time.

Any advice is appreciated.

Regards.

Answer 1

This code solved the problem:

public void EditTable()
{
    ICollection trends = CreateDataSource();
    for (int x = 1; x <= 27; x++)
    {
        DropDownList ddl = new DropDownList();
        string index = x.ToString();
        ddl.ID = "TrendList" + index;
        ddl.AutoPostBack = true;
        ddl.SelectedIndexChanged += new EventHandler(this.Selection_Change);
        ddl.DataSource = trends;
        ddl.DataTextField = "TrendTextField";
        ddl.DataValueField = "TrendValueField";
        ddl.DataBind();
        if (!IsPostBack)
        {
            ddl.SelectedIndex = 0;
        }
        HtmlGenericControl span = (HtmlGenericControl)form1.FindControl("s" + index);
        PlaceHolder placeHolder = (PlaceHolder)span.FindControl("p" + index);
        if (placeHolder != null)
        {
            placeHolder.Controls.Add(ddl);
        }
    }
}