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!

Default Focused Control Asp.net

When developing the web application it is good idea that when form open then it should be set the focus to the some control. For example if you have user log-in form then it is nice if you set the focus on the user log-in name when form loaded. In this post I will show you the techniques used to set the default focus on control when control is first loaded.

First Way:

With the release of the ASP.NET 2.0, the problem of making the default focus of the control is much easier with the introduction of the "default button" property of the form. Now you can use the defaultfocus attribute of the form. Here is sample HTML code that contains for the form :

<form defaultfocus="ControlID" runat="server">

With the above html code you can set the default focus control for the form. ASP.NET 2.0 provides three different new solutions if you need to set focus dynamically. At run time you can use Page.SetFocus method with control's ID as a parameter or you can simply call a new control's Focus method. They both do practically the same thing. It is only programmer's choice to choose which method likes more.

Second Way

In the second way of achieving default focus control functionality is the JavaScript way and below is the JavaScript code which is used to set the default focus control for the page. Here I have a simple function named "onBodyLoad" which is used to set the focus on the control when form is loaded.

function onBodyLoad()
{
var txtLoginName=document.getElementById('<%= txtLoginName.ClientID%>');
if(txtLoginName !=null)
txtLoginName.focus();
}

The above function can be called at body load or at the form load event, which is set the focus on the control.

Note :When using the master page in asp.net form, when you add new form in your application and check the option of selecting the master page , the newly added form don't have form or body tag it only contain asp:content control which don't have any onload event like the form and body have, so you can either use Page.SetFocus or control.Focus property.

You can download the source code from here.

Note : The download source only contain the JavaScript function .


All and any comments / bugs / suggestions are welcomed!