Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

GridView TemplateField in - Part 21

Suggested Videos 
Part 18 - Editing and updating data in gridview using objectdatasource control
Part 19 - Using optimistic concurrency when editing data in gridview
Part 20 - Keep gridview in edit mode when update fails due to data conflict

In this video we will discuss about using TemplateField with GridView control when editing data. Please watch part 20 of 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.
gridview with textbox as the editing interface

Step 1: Click on "Edit Columns" link from GridView Tasks pane
Edit gridview columns

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.
convert bound field into template field

Step 3: At this point, you should be back on gridview tasks pane. Click on "Edit Templates" link
Edit template field templates in gridview

Step 4: From "Display" dropdownlist, select "EditItemTemplate". Replace the "TextBox" control with a "DropDownList". 
Editing edititemtemplate in gridview

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.
Customizing the dropdownlist in the edititemtemplate of gridview control

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. 
Set the selectedvalue property of dropdownlist when the row is in edit mode

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.
gridview with dropdownlist as the editing interface


  1. hello sir . can you please tell me why i am not getting SelectedValue property in dropdownlist and are we can do this in code behind page. thanks

    1. you have to select "Edit Data Bindings" property of Dropdownlist.
      then you will get that property.

  2. Hi Venkat, I am Sanjay. This tutorial is very.......... nice. Your way of teaching is very nice. i want to ask one question.

    How can we update or delete multiple record into database using gridview, can u upload this video please.

  3. heloo sir

    I want automatically add new row in grid view with text box on tab key press so sir kindly suggest me...

  4. hello sir,
    after setting Data Binding Property of Dropdownlist ...i am getting error which is
    'DropDownList1' has a SelectedValue which is invalid because it does not exist in the list of items.
    Parameter name: value

    can you pls help me out..
    thanks in advance

    1. This is cus you have spaces in your gender values in the database table
      you have 'Female ' you must have 'Female'

    2. Yes , it doesn't found , but write it as it and recompile you will never receive error


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.