Link for csharp, asp.net, ado.net, dotnet basics and sql server video tutorial playlists
Link for text version of this video
In this video we will discuss about using TemplateField with GridView control when editing data. Please watch part 20 of asp.net gridview tutorial before proceeding.
By default, when editing data, a textbox is rendered for all the bound columns. It would make more sense to use dropdownlist as the editing interface for “Gender”. To achieve this we have to use a “TemplateField” instead of “BoundField” for “Gender” column. This can be very easily achieved using the deisgner or directly thru the HTML source.
Step 1: Click on “Edit Columns” link from GridView Tasks pane
Step 2: Click on “Gender” from “Selected Fields” section, and then click on “Convert this field into a Template Field” link and finally click OK.
Step 3: At this point, you should be back on gridview tasks pane. Click on “Edit Templates” link
Step 4: From “Display” dropdownlist, select “EditItemTemplate”. Replace the “TextBox” control with a “DropDownList”.
Step 5: Now click on “Edit Items” link from “DropDownList Tasks” pane. Add the 3 listem items (Please Select, Male, Female) to the dropdownlist and click OK. Finally click on “End Template Editing” from GridView Tasks pane.
Now run the application and click on EDIT. Notice that, “Gender” DropDownList always has “Please Select” as the selected item. This is incorrect. When the row is in “Edit” mode we want to have the correct “Gender” selected. To achieve this follow the instructions in Step 6 below.
Step 6: Now flip the webform to HTML source mode. Set “SelectedValue” property of dropdownlist as shown below. Steps 1 to 6 has converted, the gender bound field to template field. The template field HTML markup that is auto-generated is shown below.
Now run the application and click on EDIT. Notice that a dropdownlist control is now used as editing interface for gender column in the gridview control.
