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”
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”.
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:
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.
Download this project
You can download this entire project in zip format here: GridView With DropDown Example Project in ZIP Format
2 Comments