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.
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.
DataTextField - This is the DB field that will populate the displayed portion of your list.
DataValueField - This is the DB field that will populate the values for each of the dropdown items.
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!
