C# Help Home » Articles » ASP.NET » Using DropDownList control in DataGrid

Using DropDownList control in DataGrid

09. Jun, 2006 by admin 0 Comments

When I was developing a web application coupledays ago, I found some interesting things about the datagrid, I want toshare them with other vs.net programmers, so I wrote this article. Thisarticle will demonstrate how to use DropDownList control in datagrid.

pic1 Using DropDownList control in DataGrid

The essential part of the DropDown.aspx file is the following:

<asp:DropDownList id="DropDownList1" runat="server"
DataSource="<%# GetCategory() %>"
DataTextField="categoryname"
DataValueField="categoryid"
SelectedIndex='<%# GetCategoryID((string)DataBinder.Eval(Container.DataItem, "categoryname")) %>'
/>

In second line, we set the datasource of thedropdownlist control to a function 'GetCategory()', this functionfetches the Category records from database and returns a datatable. Inthe last line, we set the SelectedIndex to a funciton 'GetCategoryID',this function takes the current Categoryname as its argument, andreturns the locaiton(an integer) of the Categoryname, this enables theDorpDownList control to display the correct Categoryname for thecurrent record.

The following is the C# code:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Configuration;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace Management
{

public class DropDown : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid ProductGrid;
protected DataTable _category;

//new a database class to get records, ProductDb is a public class
//containing several functions
protected ProductDb pdb=new ProductDb();

public DropDown()
{
Page.Init += new System.EventHandler(Page_Init);
}

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
BindProduct();

}
}

private void Page_Init(object sender, EventArgs e)
{
InitializeComponent();
}

void BindProduct()
{
//pdb.GetProduct() returns a datatable to Product's datagrid
ProductGrid.DataSource=pdb.GetProduct();
ProductGrid.DataBind();
}

protected void Product_Edit(object sender, DataGridCommandEventArgs e)
{

BindCategory();
((DataGrid)sender).EditItemIndex=e.Item.ItemIndex;
BindProduct();

}

protected void Product_Cancel(object sender, DataGridCommandEventArgs e)
{
ProductGrid.EditItemIndex=-1;
BindProduct();

}
protected void Product_Update(object sender, DataGridCommandEventArgs e)
{
//get the currnet product name
string pname=e.Item.Cell[1].Controls[0].Text;
//get the current product price
string price=e.Item.Cell[2].Controls[0].Text;
//get the current categoryid
DropDownList ddl=(DropDownList)e.Item.Cells[3].FindControl("DropDownList1");
string categoryid=ddl.SelectedItem.Value;
//get the current productid
string pid=e.Item.Cell[4].Controls[0].Text;

//call pdb's update function
pdb.update(pid,pname,price,categoryid);

ProductGrid.EditItemIndex=-1;
BindProduct();

}
void BindCategory()
{
//pdb.FetchCategory() returns a datatable
_category=pdb.FetchCategory();

}

protected DataTable GetCategory()
{
return _category;
}

protected int GetCategoryID(string cname)
{
for(int i=0;i<_category.DefaultView.Count;i++)
{
if (_category.DefaultView[i]["categoryname"].ToString()==cname)
{
return i;
}
}
return 0;

}

#region Web Form Designer generated code
/// <summary>
/// Required method for Designer support – do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

}
}

The key points of this C# file are:

1.In Product_Edit() function, you have to callBindCategory() to set the _category datatable first, and then set theEditItemIndex for the datagrid, and at last, call BindProduct()function. The DropDownList control will not display anyting if youreverse this order. Because once you set the EditItemIndex, thedatagrid begings rendering records, and at the same time, theDropDownList control access the function 'GetCategory()' to get thedata source, if 'GetCategory()' returns nothing, you will not getanything of course. Just remember: before setting EditItemIndex ofdatagrid, set the data source of the control.

2.In Product_Update() function, You have noaccess to the DropDownList control directly which is embeded in thedatagrid, the solution of getting the selected value of DropDownListcontrol is the 'FindControl()' function. This function takes theDropDownList control's name as its argument, and return theDropDownList control it found, so that you can use the return controlto get the selected value. Just remember: use FindControl() function toreturn any control you want to find in the datagrid, such as text box,text area, label, calendar.