Chalaki Systems
Training About
« Fundamentals of ASP.NET MVC 3 Partial Views
Two ways to render MVC3 Partial Views: Client side Javascript or server side html helper »

How to Bind a DropDownList with a EditItemTemplate in the GridView

By admin | Published: May 1, 2012

ASP.NET GridViews are very handy to display data from a database table, view or a select statement that may contain joined tables. By default the gridview provides the fields in the boundfield format. The boundfields are fileds that have fixed GUI type and an associated datafield.

1
<asp:BoundField DataField="state" HeaderText="State" SortExpression="state" />

Convert a asp:BoundField to a asp:TemplateField

In order to change the GUI of the boundfield, we need to first convert this bound field to a TemplateField. Open the aspx file in design mode and click on the arrow on the top right corner of the GridView. You will see a menu and choose “Edit Columns”

Edit Columns for the asp:GridView

Click on the field that you want to convert from BoundField to TemplateField. In this case state is the field. Then click on “Convert This Field to Template field”.

Convert-Field-To-Template-Field

VStudio will convert the BoundField to TemplateField. The source code it will look like:

1
2
3
4
5
6
7
8
<asp:TemplateField HeaderText="state" SortExpression="state">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("state") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("state") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>


Working in the EditItemTemplate

 

Once the boundfield is converted to template field, we need to work on the EditItemTemplate. This is the Template that is is used when you click on the Edit link in the GridView row. What we want is a DropDownList as opposed to the TextBox.

Lets delete the asp:TextBox and create a asp:DropDownList as follows:

1
2
3
4
5
6
7
8
<asp:TemplateField HeaderText="state" SortExpression="state">
<EditItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList></EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("state") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Now lets run the website and we will see the GridView as shown below:

GridView working screenshot

Create a new SqlDataSource to get state list

Now we will create a new SqldataSource called SqlDistinctDS that will select all distinct [state] fields from authors table.

1
2
3
<asp:SqlDataSource ID="SqlDistinctDS" runat="server"    ConnectionString=
"<%$ ConnectionStrings:bookstote_connection_string %>" SelectCommand="SELECT distinct [state] FROM [authors]"        
ProviderName="<%$ ConnectionStrings:bookstote_connection_string.ProviderName %>">

Attach the DataSource to DropDownList and bind SelectedValue with [state] field

Its time now to change the EditItemTemplate and the DropDownList to use the above SqlDataSource and also bind the [state] column to the SelectedValue attribute.

1
2
3
4
5
6
7
8
<asp:TemplateField HeaderText="state" SortExpression="state"> <EditItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDistinctDS"
DataTextField="state" DataValueField="state" SelectedValue='<%# Bind("state") %>' >
</asp:DropDownList></EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("state") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Run the project see the results

Now run the website and click on edit link of any row in the GridView and you will see that the state field now is a dropdownlist and populated withh all distinct states. Also the appropriate state is selected. You can choose a different state and click on Update link and the new state will be saved into the database.

asp GridView in EditModel with DropDownList populated inside a EditItemTemplate

Download this project

You can download this entire project in zip format here: GridView With DropDown Example Project in ZIP Format

Categories: ASP.NET, Data Access, GridView. Bookmark the permalink.
« Fundamentals of ASP.NET MVC 3 Partial Views
Two ways to render MVC3 Partial Views: Client side Javascript or server side html helper »

2 Comments