How to Popluate the DropDownList inside the DataGrid

Jul

5th

How to Popluate the DropDownList inside the DataGrid

Author: admin | Files under Asp.net, tutorials

Introduction

DataGrid is very useful control. It is a full-featured data-bound control that displays data in tabular format, and provides the ability to sort, select, edit, and delete records from its associated data source.

On other end, DropDownList control lists the values in the drop down fashion. Some times, we have to use DropDownList controls in the DataGrid . Suppose, to select the country of the employee or user, it is good if we have drop down lists which lists all the countries.

In this tutorial I will try to explain the following things:

How to add the DropDownList to the DataGrid
Bind the Datagrid Control to the Data Source
Populate the DropDownList with XML file
Populate the DropDownList from the Database

How to add the DropDownList to the DataGrid

Adding the DropDownList to the Datagrid is simple, first add template columns to DataGrid and then, add the DropDownList control to the template. I will try to explain in step by step manner as follows:

Drag and drop DataGrid onto the web form.
Right click on DataGrid -> select Property Builder.
In Property Builder, select Columns.
Add two bound columns and
Add one template column. (Remember to add bound columns first and than the template column.)
Uncheck Create columns automatically.
In the same window, click on the bound column appearing on the right window and set its header text to “Employee ID” and DataField to “EmpID”. Click on the second bound column appearing in the right window and set header text to “Employee Name” and DataField to “EmpName”

Adding the DropDownList controls to templates

Now, to add the DropDownList, simple right click on DataGrid and select the option Edit template.
In the item template, just drag and drop a DropDownList in item template.

Bind the Datagrid Control to the Data Source

Above create Datagrid control has three columns EmpId, EmpName and Countries. Leave the countries column for now, I will explain it another two sections. Now, we need fill the EmpId and EmpName columns from the data base table employee. To fill the data grid from the data base, it is best to go with binding to the data source as follows:

private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
BindData();
}
}
public void BindData()
{
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM employee",myConnection);
DataSet ds = new DataSet();
ad.Fill(ds,"employee");
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
}

We are creating the dataset and filling it with the result of adapter (ad). Now, the important thing is we are setting the data source to the dataset (ds) and we are calling DataBind() method to bind the DataSet with DataGrid. The Datagrid control automatically populates the grid control with records of the employee table.

Populate the DropDownList with XML file

We have populated the empid and empname from the database. Now, the other column is the countries, we have an xml file called countires.xml as follows:
Countries.xml

<?xml version="1.0" encoding="utf-8" ?>
<details>
<countries>
<countryname>USA</countryname>
</countries>
<countries>
<countryname>China</countryname>
</countries>
</details>

We have to get country details from this xml file and populate the DropDownList in the DataGrid. There is name space called System.XML which helps us to parse and work with the XML files as follows:

XmlDocument doc = new XmlDocument();
doc.Load(Server.MapPath("countries.xml"));
XmlNodeList nodeList = doc.SelectNodes("details/countries");

We are creating the xml document and loading the xml file into it. At last, we are getting the list of nodes from the xml file.

Now, the question is how to access and populate the DropDownList in the Datagrid. It is simple,

private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
BindData();
FillCountries();
}
}
public void BindData()
{
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM employee",myConnection);
DataSet ds = new DataSet();
ad.Fill(ds,"employee");
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
}
public void FillCountries()
{
XmlDocument doc = new XmlDocument();
doc.Load(Server.MapPath("countries.xml"));
XmlNodeList nodeList = doc.SelectNodes("details/countries");
foreach(XmlNode node in nodeList)
{
ListItem Litem = new ListItem(node.SelectSingleNode("countryname").InnerText));
((DropDownList)sampleGrid.Items[num].Cells[3].FindControl("countires")).Items.Add (Litem);
}
}

FillCountries() method reads the xml file and adds new list item to DataGrid DropDownList control.

Populate the DropDownList from the Database

Compared to xml approach this database is where simple. Just get the dataset and set this dataset as datasource property of the DropdownList control as follows:

private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
BindData();
FillCountries();
}
}
public void BindData()
{
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM employee",myConnection);
DataSet ds = new DataSet();
ad.Fill(ds,"employee");
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
}
public DataSet FillCountries()
{
SqlDataAdapter ad = new SqlDataAdapter("SELECT name FROM Countries", myConnection);
DataSet ds = new DataSet();
ad.Fill(ds,"Categories");
return ds;
}

We have another important step here, search for the DropDownList in the aspx HTML page and modify it has follows:

<asp:DropDownList id="countryList" runat="server"
DataSource="<%# FillCountries %>" DataTextField="Description"
DataValueField="Description" >

See the data source property of the DropDownList, we are assigning it with the return data set from the FillCountries method. As we set the DataSource property, DropDownList automatically, fetches and fills the countries details as list items in the DropDownList control.

High On MicroSoft