March 16, 2009

Bind DataTable to DropDownList

Create a new website or add a webpage to an existing website. Add a DropDownList web-server control to the page either by dragging the control from the toolbox or by writing code directly. The code will then look like below.
<body>
<
formid="form1" runat="server">
<
div>

<asp:DropDownList ID="DropDownList1" runat="server">

</
asp:DropDownList>
</div></form></body>

Then, to the code-behind page's Page_Load method, create a new DataTable.

protected void Page_Load(object sender, EventArgs e)
{
DataTable
dt = new DataTable();//create a new DataTable
}
Then, create DataColumn object "countryColumn" and set its properties.

DataColumn countryColumn = new DataColumn(); //create a new DataColumn
countryColumn.ColumnName = "Country"; //set the column name of the DataColumn
countryColumn.DataType = typeof(string); //set the data type of the DataColumncountryColumn.MaxLength = 25; //set the length of the DataColumn
Then, add the DataColumn to the DataTable.

dt.Columns.Add(countryColumn); //addDataColumn to DataTable
Now, the DataColumn countryColumn has been added to the DataTable dt. Now, create another DataColumn "capitalColumn" and set its properties.

DataColumn capitalColumn = new DataColumn();//create a new DataColumn
capitalColumn.ColumnName = "Capital"; //set the column name of the DataColumncapitalColumn.DataType = typeof(string);//set the data type of the DataColumn
capitalColumn.MaxLength = 25;
//set the length of the DataColumn
Then, add the capitalColumn to the DataTable dt.

dt.Columns.Add(capitalColumn); //add DataColumn to DataTable
Now, the DataColumn "capitalColumn" has been added to the DataTable. Now, two DataColumns have been added to the DataTable dt.

Note that, we can add more columns of data to the DataTable but we will not be able to display it in the DropDownList. The DropDownList has two properties - "DataTextField" and DataValueField" that can binded to the DropDownList. The DataTextField property refers to the text property that is visible on the page while the DataValueField property refers to the value of the associated text.
Now, add few rows to DataTable dt.

dt.Rows.Add("Australia", "Sydney"); //add DataRow to DataTable
dt.Rows.Add(
"France", "Paris"); //add DataRow to DataTabledt.Rows.Add("Italy", "Rome"); //add DataRow to DataTable
Now, set the DataSource property of the DropDownList to DataTable.

DropDownList1.DataSource = dt; //set DataSource property of DropDownList
Then, set the DataTextField and DataValueField of the DropDownList.

DropDownList1.DataTextField = dt.Columns[0].ToString();//set DataTextField to first column(countryColumn) of dt

DropDownList1.DataValueField = dt.Columns[1].ToString();
//set DataTextField to second column (capitalColumn) of dt
Then, bind the DataTable to the DropDownList.

DropDownList1.DataBind();//bind data to DropDownList
Now, when the page is run, the page will display a drop down with the text showing country and it's value showing capital. The page source will look like below.
<div>
   <select name="DropDownList1" id="DropDownList1">
<option value="Sydney">Australia</option>
<option value="Paris">France</option>
<option value="Rome">Italy</option>
</select>
</div>

The complete Page_Load method is below.

protected void Page_Load(object sender, EventArgs e)
{

DataTable dt = new DataTable();//create a new DataTable

DataColumn
countryColumn = new DataColumn();// create a new DataColumn
countryColumn.ColumnName = "Country";//set the column name of the DataColumn
countryColumn.DataType = typeof(string); //set the data type of the DataColumncountryColumn.MaxLength = 25; //set the length of the DataColumn

dt.Columns.Add(countryColumn); //add DataColumn to DataTable

DataColumn capitalColumn = new DataColumn();// create a new DataColumn

capitalColumn.ColumnName = "Capital"; //set the column name of the DataColumncapitalColumn.DataType = typeof(string); //set the data type of the DataColumncapitalColumn.MaxLength = 25; //set the length of the DataColumn

dt.Columns.Add(capitalColumn); //add DataColumn to DataTable

dt.Rows.Add("Australia", "Sydney"); //add DataRow to Datatabledt.Rows.Add("France", "Paris"); //add DataRow to Datatabledt.Rows.Add("Italy", "Rome"); //add DataRow to Datatable

DropDownList1.DataSource = dt; //set DataSource property of DropDownList

DropDownList1.DataTextField = dt.Columns[0].ToString(); //set DataTextField to first column(countryColumn) of dt

DropDownList1.DataValueField = dt.Columns[1].ToString(); //set DataTextField to second column (capitalColumn) of dt

DropDownList1.DataBind(); //bind data to DropDownList
}
Also, view how to bind GridView to DataTable or home.

2 comments:

mary.annjoy said...

can you tell me how to display chinese characters in a dropdownlist? all the other controls display chinese characters correctly, but dropdownlist displays it as boxes.

Shahed Kazi said...

I have tried creating a dropdownlist control with some chinese characters and it has worked fine in both Firefox 3.0 and Internet Explorer 7.0.

You should check if you have the correct Language Pack installed.

(Also, I do not know what these Chinese characters mean - therefore apologies in case it appears offensive).

<asp:DropDownList
ID="DropDownList1"
runat="server">

<asp:ListItem
Value="1">基本上</asp:ListItem>

<asp:ListItem
Value="2">電腦只是</asp:ListItem>

<asp:ListItem
Value="3">處理數位</asp:ListItem>

</asp:DropDownList>

Reference: Shahed Kazi at AspNetify.com