Question

I usually create a gridview based on data so it will have the rows depending on what the data source spits out but this time.. I need to do something different. I need to have 5 rows with the following on each row

TextBox |  DropDown   |   FileUploader  |  Checkbox
TextBox |  DropDown   |   FileUploader  |  Checkbox
TextBox |  DropDown   |   FileUploader  |  Checkbox
TextBox |  DropDown   |   FileUploader  |  Checkbox
TextBox |  DropDown   |   FileUploader  |  Checkbox

Then when a submit button is clicked it will take each row and create a product (I will call the Product class and just assign the properties the row and save the product as do the same for all rows).

How can i those 5 items to the gridview if its not dependant on data?, it will need to have the gridview properties like headers will be

Product Name  |  Lot #   |   Image   |     Active   

I am just not sure how to add those 5 rows if not depending on any data source, but still would like to use the gridview properties.

Any ideas would be much appreciated, first time i have to deal with the gridview not dependent on data.

NOTE: It will always be 5 rows.. no matter what and I will check if all the information is filled to decide whether to add the product or not.

Thank you

Answer 1

First, let’s create the Gridview with controls in the markup, and a button underneath to save the products…

<asp:GridView runat="server" ID="ProductGridview" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Product Name">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="ProductNameTextBox" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Lot #">
            <ItemTemplate>
                <asp:DropDownList runat="server" ID="LotNumberDropDownList">
                    <asp:ListItem Text="1" />
                    <asp:ListItem Text="2" />
                    <asp:ListItem Text="3" />
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <asp:FileUpload runat="server" ID="ImageFileUpload" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Active">
            <ItemTemplate>
                <asp:CheckBox Text="Active" runat="server" ID="ActiveCheckBox" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:Button Text="Save Products" runat="server" ID="SaveProductsButton" OnClick="SaveProductsButton_Click" />

… giving us a textbox, dropdownlist, fileupload and checkbox in each row.

Now, we need to generate a set of 5 rows. We can do this really easily by binding the gridview to a List<int>, which we can generate in Page_Load…

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Generate a list of 5 integers - this will be the data source for the GridView
        List<int> rows = new List<int>();

        for (int i = 0; i < 5; i++)
        {
            rows.Add(i);
        }

        //Bind the Gridview to the list of integers so we get 5 rows in the UI
        ProductGridview.DataSource = rows;
        ProductGridview.DataBind();
    }
}

This gives us this as the rendered gridview:

Now we just need code to read the rows back in when the button is clicked; we iterate through the rows, locating the controls in each row to read their value…

protected void SaveProductsButton_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in ProductGridview.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            // Have to cast the result of FindControl to the correct type
            TextBox productTextBox = (TextBox)row.FindControl("ProductNameTextBox");
            DropDownList lotNumberDropDownList = (DropDownList)row.FindControl("LotNumberDropDownList");
            FileUpload imageFileUpload = (FileUpload)row.FindControl("ImageFileUpload");
            CheckBox activeCheckBox = (CheckBox)row.FindControl("ActiveCheckBox");

            saveProduct(productTextBox.Text, lotNumberDropDownList.SelectedItem.Text,
                                   imageFileUpload.PostedFile, activeCheckBox.Checked);
        }
    }
}