santosh-asp tutorial

DropDownList in GridView

The GridView allows editing on a row-by-row basis. In the previous lesson we saw how to edit a Gridview using SqlDataSource.

Edit GridView

In this chapter, we are going add a DropDownList in the gridview control.

In this article I have used SQL SERVER database for sample data.

  

    Create table  tblRecord
    (
      Id int primary key, Name varchar(200),Branch varchar(50)
     )
--Insert some record

Before you start to generate GridView in your asp file, you should create a ConnectionString in your web.Config File. Double click the web.config file on the right hand side of the Visual Studio and add the following connectionstring code in that file.

Web.Config File

  

<?xml version="1.0"?>
<configuration>
  <connectionStrings>
	 <add name="dbSantoshTestConnectionString" 
         connectionString="Data Source=PS-PC\SANTOSH;Initial Catalog=dbSantoshTest;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
</configuration>

After setting the cpnnectionstring, we are going to bind the DropDownList to the city column of the stores table in the pubs database from default.aspx. In order to bind a DropDownList, we need a DropDownList control and an SqlDataSource to connect the datafield to the database. The following code create a TemplateField for city column in the webpage.

  

<asp:TemplateField HeaderText="Branch" SortExpression="Branch">
				<EditItemTemplate>
					<asp:DropDownList ID="DropDownList1" runat="server"
						DataSourceID="SqlDataSource2" DataTextField="Branch" DataValueField="Branch"
						SelectedValue='<%# Bind("Branch") %>'>
					</asp:DropDownList>
				</EditItemTemplate>
				<ItemTemplate>
					<asp:Label ID="Label1" runat="server" Text='<%# Bind("Branch") %>'></asp:Label></ItemTemplate></asp:TemplateField>

Also we need another SqlDataSource to connect the DropDownList to the database.

  

    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
	ConnectionString="<%$ ConnectionStrings:dbSantoshTestConnectionString %>"
	SelectCommand="SELECT DISTINCT [Branch] FROM [tblRecord]"></asp:SqlDataSource>

Full source code of Default.aspx:-

  

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True"
	AllowSorting="True" DataSourceID="SqlDataSource1" AllowPaging="True" DataKeyNames="Id" CellPadding="4" ForeColor="#333333" GridLines="None">
		<AlternatingRowStyle BackColor="White" />
		<Columns>
		    <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
           
		<asp:TemplateField HeaderText="Branch" SortExpression="Branch">
				<EditItemTemplate>
					<asp:DropDownList ID="DropDownList2" runat="server"
						DataSourceID="SqlDataSource2" DataTextField="Branch" DataValueField="Branch"
						SelectedValue='<%# Bind("Branch") %>'>
					</asp:DropDownList>
				</EditItemTemplate>
				<ItemTemplate>
					<asp:Label ID="Label2" runat="server" Text='<%# Bind("Branch") %>'></asp:Label>
				</ItemTemplate>
			</asp:TemplateField>
		</Columns>
	    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
        <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
        <SortedAscendingCellStyle BackColor="#FDF5AC" />
        <SortedAscendingHeaderStyle BackColor="#4D0000" />
        <SortedDescendingCellStyle BackColor="#FCF6C0" />
        <SortedDescendingHeaderStyle BackColor="#820000" />
	</asp:GridView>
	<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbSantoshTestConnectionString %>" SelectCommand="SELECT * FROM [tblRecord]"
        UpdateCommand="UPDATE [tblRecord] SET [Name] = @Name , [Branch] = @Branch WHERE [Id] = @Id" >
	</asp:SqlDataSource>
	</div>
	<asp:SqlDataSource ID="SqlDataSource3" runat="server"
	ConnectionString="<%$ ConnectionStrings:dbSantoshTestConnectionString %>"
	SelectCommand="SELECT DISTINCT [Branch] FROM [tblRecord]"></asp:SqlDataSource>
	
	</form>
</body>
</html>