How to add Dropdown list as a gridview item

Question

My form has three columns in gridview. One is quantity(dropdown list){How to add this quantity dropdownlist?}, others are price and amount. I want to calculate amount inside gridview. If I selected quantity “2” then it calculates quantity* price. How can I get the selectedindexchanged property for dropdown inside gridview or any other options?

How to add dropdown list in gridview item? How to add values to the dropdown inside gridview? How to write the code for selectedindexchanged event for dropdown inside gridview in asp.net?

Answer 1

Your Question has three parts:

• How to add DropDownList in GridView?
• How to get selected item from DropDownList inside GridView?
• How to calculate the values and display in GridView?

Here's how we can do it. First add this markup in the page. I have added one more column for Product Name to make it look better:

<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:DropDownList ID="ddlQuantity" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlQuantity_SelectedIndexChanged"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Price">
            <ItemTemplate>
                <asp:Label ID="lblPrice" Text='<%#Eval("Price") %>' runat="server" ></asp:Label>
            </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderText="Amount">
            <ItemTemplate>                        
                <asp:Label ID="lblAmount" Text="0.00" runat="server" ></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

How to add DropDownList in GridView

Populate the GridView in Page_Load() (I have used a List of Products):

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Test data to populate GridView
        GridView1.DataSource = new List<Product>()
        {
            new Product{ID=1, Name="Paper", Price=7.99M},
            new Product{ID=2, Name="Pen", Price=14.99M},
            new Product{ID=3, Name="Pencil", Price=1.99M}
        };

        GridView1.DataBind();
    }
}

This will trigger the GridView's RowDataBound event. In the event method we will bind the DropDownList in each row like below:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var ddl = e.Row.FindControl("ddlQuantity") as DropDownList;
        if (ddl != null)
        {
            ddl.DataSource = new List<string>() { "0", "1", "2", "3", "4" };
            ddl.DataBind();
        }
    }
}

How to get selected item from DropDownList inside GridView and

How to calculate the values and display in GridView

When you change any selection in DropDownList, ites SelectedIndexChange event will fire. In that event method we can find which DropDownList was change and also it's "NamingContainer" - the row of the GridView holds it:

protected void ddlQuantity_SelectedIndexChanged(object sender, EventArgs e)
{
    GridViewRow gvr = ((DropDownList)sender).NamingContainer as GridViewRow ;
    if (gvr != null)
    {
        decimal price = 0.00M;
        int quantity = 0;
        //We can find all the controls in this row and do operations on them
        var ddlQuantity = gvr.FindControl("ddlQuantity") as DropDownList;
        var lblPrice = gvr.FindControl("lblPrice") as Label;
        var lblAmount = gvr.FindControl("lblAmount") as Label;
        if (ddlQuantity != null && lblPrice != null && lblAmount != null)
        {
            int.TryParse(ddlQuantity.SelectedValue, out quantity);
            decimal.TryParse(lblPrice.Text, out price);

            lblAmount.Text = (price * quantity).ToString();
        }    
    }
}

And here's the result:

You can download the test project here.