To read the article online, visit http://www.4GuysFromRolla.com/webtech/050801-1.shtml

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.

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!


  • Article Information
    Article Title: Adding a DropDownList to an Editable DataGrid
    Article Author: Matthew Rouse
    Published Date: Tuesday, May 08, 2001
    Article URL: http://www.4GuysFromRolla.com/webtech/050801-1.shtml


    Copyright 2014 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers