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.

After creating a new website or to an existing website, add a new web page and name it DataTable.aspx . Add a GridView control to the page either by dragging the control from the Toolbox or by writing the code manually. Either way, the code for the GridView control will like below.

<body>
<
form id="form1" runat="server">
<
div>

<asp:GridView ID="GridView1"runat="server">


</
asp:GridView>

</div></form></body>

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

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable(); //instantiate a new DataTable
}

Then create a new DataColumn object and set its properties.

DataTable dt = new DataTable(); //add DataTable

DataColumn dc1 =new DataColumn("Firstname", typeof(string));// create new DataColumn

dc1.MaxLength = 20;//set the max length property

dc1.Caption = "First Name"; // set the caption

After creating the DataColumn object, add the object to the DataTable

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

In this example, a DataColumn object, dc1 is created. The column name is set to "FirstName" and the type of object the column accepts is string. If any other object is passed on to the column, an exception will be thrown. The maximum length of the string is 15. If a string longer than 15 characters is passed, the string will be truncated but no exception will be thrown.

Let's add another DataColumn object to the DataTable.

DataColumn dc2 = new DataColumn("LastName", typeof(string));

dc2.MaxLength = 20;
dc2.Caption =
"Last Name";

Then, add the DataColumn to the DataTable,

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

Let's create another DataColumn of type decimal,

DataColumn dc3 = new DataColumn("Salary", typeof(decimal));//create new DataColumn

dc3.DefaultValue = 0.0;//set the default value

Then, add the DataColumn to the DataTable,

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

Now, three DataColumn objects are created and added to the DataTable dt.

To add data to the DataTable, DataRow objects needto be created and then added to the Rows collection of the DataTable by using the Add method of the Rows collection. The DataRow object must conform to constraints set by the DataTable object's columns.

To create a new Row for the DataTable, use the NewRow() method on the DataTable.

DataRow row1 = dt.NewRow();//create a new Row

Then add data to the row for individual columns of the DataTable.

DataRow row1 = dt.NewRow();//create a new Row

row1["Firstname"] = "my first name"; //set value for column Firstname
row1["Lastname"]= "my last name"; //set value for column Lastname
row1["Salary"] = 5000; //set value for column Salary

Then, add the DataRow object to the DataTable's Rows collection.

dt.Rows.Add(row1);

Alternatively, a new DataRow object can be added to the DataTable by simply passing values to the DataTable dt.

dt.Rows.Add("my first name2", "my last name", 5000);//add DataRow to DataTable by values


Now, two DataRows have been added to the DataTable dt. The DataTable needs to be binded to the GridView declared in the .aspx page.

First, set the DataSource property of the GridView.

GridView1.DataSource = dt;

Then, execute the DataBind method of the GridView.

GridView1.DataBind();

Now, when the page is run - the page will show a GridView with two rows of data. The whole code is below.

protected
void Page_Load(object sender, EventArgs e)
{

DataTable dt =new DataTable(); //add DataTable

DataColumn dc1 = new DataColumn("Firstname", typeof(string));

// create new DataColumn

dc1.MaxLength = 15;//set the max length property

dc1.Caption = "First Name"; // set the caption

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

DataColumn dc2 = new DataColumn("LastName", typeof(string));// create new DataColumn

dc2.MaxLength = 20;//set the max length property

dc2.Caption = "Last Name";// set the caption

dt.Columns.Add(dc2);

DataColumn dc3 =new DataColumn("Salary", typeof(decimal));//create new DataColumn

dc3.DefaultValue = 0.0;//set the default value

dt.Columns.Add(dc3); // add dataColumn to DataTable

dt.Rows.Add("my first name2", "my last name", 5000);//add DataRow to DataTable by values

DataRow row1 = dt.NewRow();//create a new Row

row1["Firstname"] = "my first name"; //set value for column Firstname

row1["Lastname"] = "my last name"; //set value for column Lastname

row1["Salary"] = 5000; //set value for column Salary

dt.Rows.Add(row1);

GridView1.DataSource = dt;

GridView1.DataBind();

}


Reference: Shahed Kazi at AspNetify.com