Articles → ASP .NET GRIDVIEW → Bind dropdown inside gridview in asp.net

Bind dropdown inside gridview in asp.net

The objective of this tutorial is to demonstrate how to bind dropdown inside gridview in asp.net

Prerequisites

Software

Visual studio 2005 (or above) and SQL server 2005 (or above) should be installed on your machine.

Technical knowledge

In order to understand this tutorial you must have the sound knowledge of following concepts

     1. How to create a table in SQL server?

     2. How to insert data in a table (manually or through insert script)

     3. How to create website using visual studio?

     4. What is a gridview control?

     5. How to add controls inside gridview?

     6. How to define connection string inside web.config?

     7. What is SQL data source control?

     8. How to bind grid and dropdown using SQL data source control?

Steps Involved

In order to achieve our goal we will be following these steps

     1. Add tables in database

     2. Create a new web application and add ‘GridView’ control in the ‘Default.aspx’ page

     3. Add connection string for database in web.config

     4. Add SQL data source for binding gridview

     5. Bind grid with SQL data source

     6. Add sql data source for teacher drop down

     7. Bind dropdown with SQL data source

     8. Output

Add tables in database

We create the following tables and add data to it as shown below:

Picture showing the table schema of the class table

Create a new web application and add ‘GridView’ control

in the ‘Default.aspx’ page

First of all create a new website and insert the following piece of code in the ‘Default.aspx’ page.

<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false"></asp:GridView>

Add connection string for database in web.config

In order to communicate with the database it is important to use connection string. A connection string has parameters such as server name, database name, user name and password. You can add connection string in web.config in following manner.

<connectionStrings>
	<add name="MyConnectionString" connectionString="conn_string" providerName="System.Data.SqlClient"/>
</connectionStrings>

Add SQL data source for binding gridview

SqlDataSource uses ‘ConnectionString’ property to connect to the underlying database. Have a look at the code given below. Here ‘ConnectionString’ property of SqlDataSource is set to ‘MyConnectionString’ which we have added in last section

<asp:SqlDataSource ID="sdsGrid" runat="server"
  ConnectionString="
	<%$ ConnectionStrings:MyConnectionString %>"
  SelectCommand="select C.ClassId, C.ClassDisplayName FROM Class C"  />

Bind grid with SQL data source

If you look carefully at the code written below, you will notice that in the GridView control the property DatasourceId is set to ‘sdsGrid’ which is the Id for the SqlDataSource mentioned above

<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false" 
        DataSourceID="sdsGrid">
	<Columns>
		<asp:TemplateField HeaderText="Class">
			<ItemTemplate>
				<asp:Label ID="lblClassName" runat="server" Text='<%#Eval("ClassDisplayName") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Teacher">
			<ItemTemplate>
				<asp:DropDownList ID="ddlTeacher" runat="server"></asp:DropDownList>
			</ItemTemplate>
		</asp:TemplateField>
	</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sdsGrid" runat="server"
  ConnectionString="
	<%$ ConnectionStrings:MyConnectionString %>"
  SelectCommand="select C.ClassId, C.ClassDisplayName FROM Class C"  />

Add sql data source for teacher drop down

Now similar to how SqlDataSource was created for class we create a SqlDataSource for teacher.

<asp:SqlDataSource ID="sdsTeacher" runat="server"
  ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
  SelectCommand="SELECT ([TeacherFirstName] + ' ' + [TeacherLastName]) as TeacherName  FROM [TeacherDetails]">
</asp:SqlDataSource>

Bind dropdown with SQL data source

You can bind the SqlDataSource for teacher to the dropdown by setting the value of 'DataSourceID' to 'sdsTeacher'.

<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false" 
        DataSourceID="sdsGrid">
	<Columns>
		<asp:TemplateField HeaderText="Class">
			<ItemTemplate>
				<asp:Label ID="lblClassName" runat="server" Text='<%#Eval("ClassDisplayName") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Teacher">
			<ItemTemplate>
				<asp:DropDownList ID="ddlTeacher" runat="server" DataSourceID="sdsTeacher" DataTextField="TeacherName"></asp:DropDownList>
			</ItemTemplate>
		</asp:TemplateField>
	</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sdsGrid" runat="server"
  ConnectionString="
	<%$ ConnectionStrings:MyConnectionString %>"
  SelectCommand="select C.ClassId, C.ClassDisplayName FROM Class C"  />
	<asp:SqlDataSource ID="sdsTeacher" runat="server"
  ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
  SelectCommand="SELECT ([TeacherFirstName] + ' ' + [TeacherLastName]) as TeacherName  FROM [TeacherDetails]">
	</asp:SqlDataSource>

Output

This is how the final output will be displayed

Picture showing the datagrid with dropdown bound with records

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, April 30, 2014

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250