When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sections:
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
XML Info
Information:
Feedback
Author an Article
Technology Jobs
ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
Print this page.
Published: Tuesday, May 08, 2001

Adding a DropDownList to an Editable DataGrid

By Matthew Rouse


About this Article
This article examines how to add a DropDownList control to an editable DataGrid. You can learn more about ASP.NET from the plethora of articles at the ASP.NET Article Index; you can download the latest ASP.NET Beta at: www.ASP.NET.

- continued -

'

This article assumes working knowledge of ASP.NET's DataGrid control. If you need to brush up on this control's specifics, be sure to read the following articles and tutorials:

Introduction
More and more developers are finding out just how useful DataGrids are, but there is so much involved in this unique and powerful tool, that hardly anybody knows exactly what it's capable of. For instance, most people know that you can edit items in-place with a DataGrid, but few know that you can select the type of control that you want to use for the editing. Instead of using the default TextBox that it gives you, you can choose to use a DropDownList, RadioButtonList or any other bindable control!

Please note, this article assumes basic familiarity with DataGrids, and doesn't delve into details about EventHandling, DB functionality, etc. There are plenty of articles out there written by people much smarter than I am.

The Basic DataGrid
In the basic data grid you can specify to add BoundColumns, how they look, and what goes in them:

<asp:datagrid id="dgExample" runat="Server" autogeneratecolumns="False"
              oncancelcommand="DataCancel" onupdatecommand="DataUpdate"
              datakeyfield="tempField">
<Columns>
  <asp:boundcolumn headertext="Temp Column" datafield="tempField" />
</Columns>
</asp:datagrid>

Then when a user goes to edit, the system will supply them with a textbox for editing, with no help needed from you. For most cases, this is all you need. But what about the cases where you want them to be able to select from a DropDownList when they're editing?

For this, we use Templates. Instead of the BoundColumn in our previous code sample, we'll use the TemplateColumn to define exactly how to handle the data. In the code below, you'll notice that the TemplateColumn is divided into two parts: an ItemTemplate, and an EditItemTemplate. This allows us to define things for both the display mode, as well as when it's in edit mode.

<asp:datagrid id="dgExample" runat="Server" autogeneratecolumns="False"
              oncancelcommand="DataCancel" onupdatecommand="DataUpdate"
              datakeyfield="tempField">
<Columns>
  <asp:TemplateColumn headertext="Status">
    <ItemTemplate>
       <asp:Label id="lblLabelName" runat="server" 
                  Text='<%# Container.DataItem("tempField") %>'>
       </asp:Label>
    </ItemTemplate>

    <EditItemTemplate>
       <asp:DropDownList id=cmbStatuses runat="server" datavaluefield="StatusCode" 
                         datatextfield="Name" DataSource="<%#DropDownDataView%>">
       </asp:DropDownList>
    </EditItemTemplate>
  </asp:TemplateColumn>

  <asp:editcommandcolumn Edittext="Edit" canceltext="Cancel" updatetext="OK" />
</Columns>
</asp:datagrid>

For the display mode, we're just using a label, and populating it much the same way as we did with the BoundColumn previously. But in the EditItemTemplate, we're defining a DropDownList! There are three key elements to pay attention to here.

  1. DataTextField - This is the DB field that will populate the displayed portion of your list.
  2. DataValueField - This is the DB field that will populate the values for each of the dropdown items.
  3. DataSource - This is where the control will be getting its data from. Pay attention to the name, you'll be seeing it again.

We've examined the Web control code needed, but we've still yet to look at the ASP.NET source code. In Part 2 we'll examine the Code-behind page and its source code!

  • Read Part 2!



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article