Adding and Binding A DropDownList Control In Footer of GridView Control

In this post I will show you how you can add DropDownList control in the grid view footer and also binding DropDownList control to the data source. Let us start with the example code. First you have to add the footer to the grid view control by setting the ShowFooter property to true. Next you have to add the dropDownList control to the footer of the any of the column in the grid view. Here I have added country DropDownList in the footer of the country column in the grid view control, this DropDownList control will contain the names of the countries in the grid view, by selecting the distinct country name from the current pages records. Here is the html code to add the DropDownList control in the footer of the country column in the grid view control.

<asp:TemplateField>
<HeaderTemplate   >
  <asp:Label ID="lblheader" runat="server" Text='Country'></asp:Label>
</HeaderTemplate>
<ItemTemplate>
  <asp:Label ID="txtLabel" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
 <asp:DropDownList ID="ddlDropDownList" runat ="server" ></asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>

And here is the code for the RowDataBound event of the grid view control, here I have first check for the row type , as I am looking for the footer row of the grid view control, So I check for the row type of footer, if current row is footer row then I will search for the ddlDropDownList control which is the dropDownList control added in the footer of the country column in the grid view control. After the FindControl I have check to see if the DropDownList Control is found or not if true, then I have set the DataSource and the DataTextField of the DropDownList control and then at the end I have call the DataBind of the DropwDownList control.

if (e.Row.RowType == DataControlRowType.Footer)
{
DropDownList ddlDropDownList = (DropDownList)e.Row.FindControl("ddlDropDownList");
if (ddlDropDownList != null)
{
ddlDropDownList.DataSource =  dtsCustomer.Tables[1];
ddlDropDownList.DataTextField = "Country";
ddlDropDownList.DataBind();
}
}

Here is the output of the above work, You can see the DropDownList in the footer of the Country column of the grid view control.


You can download the source code from here

Note: In the Source code you can find script of a store procedure which you need to execute in the northwind database, And remember you have to replace the alter keyword with the Create so new store procedure will be created.

All and any comments / bugs / suggestions are welcomed!