Adding a DropDownList to the GridView

If you want to add a DropDownList control to your GridView, follow the steps below. Note that in order to make this example as simple as possible, the DropDownList is only displayed in edit mode. These instructions assume you have already set up your GridView for editing (see Enabling Editing in mmGridView).

Step 1: Add a Template Column to the GridView

Select your GridView in design mode, click its smart tag, then click the Edit Columns link:



Fields dialog's Available fields list, select TemplateField, then click Add:



1. Click OK to add the template column.

Step 2: Specifying the EditItemTemplate for the Template Column

The EditItemTemplate specifies how the column looks and behaves when its parent row is in edit mode (i.e. when the user clicks the row's edit button).

1. Select your GridView in design mode, click its smart tag, then click the Edit Templates link:

   

2. With the template column's smart tag selected, select the EditItemTemplate:

   

3. Drag an instance of mmDropDownList from the Visual Studio toolbox and drop it in the EditItemDataTemplate area:

   

4. With the DropDownList selected, go to the Properties window and change its ID to something meaningful, (in this example you might change it to cboProducts).

5. With the DropDownLists's smart tag, selected, click the Edit DataBindings link:

   

6. This launches the DataBindings dialog. In the Bindable properties list select SelectedValue. With the Custom bindings option selected, enter a Bind() expression that specifies the name of the data column in the GridView's DataSource to which you want to bind the SelectedIndex property of the DropDownList. For example:

   

7. Click OK to close the dialog.

Step 3: Specifying the ItemTemplate for the Template Column

The ItemTemplate specifies how the column looks and behave when it's not in regular display mode (i.e. not in edit mode). For this example, we will create a simple label that only displays the ID of the product.

1. With the template column's smart tag selected, select the ItemTemplate:

   

2. Drag an mmLabel from the Visual Studio toolbox and drop it in the template column. Go to the Properties window and change the label's ID to something meaningful:

   

3. Select the label's smart tag, and select the Edit Data Bindings link:

   

4. In the DataBindings dialog's Bindable properties select Text. With the Custom bindings option selected, enter a Bind() expression that specifies the name of the data column in the GridView's DataSource to which you want to bind the Text property of the Label. For example:

   

5. Click OK to close the dialog.

Step 4: Defining an Object Data Source to Fill the DropDownList

1. In the Visual Studio ToolBox, select the Data tab then drag an ObjectDataSource onto the web form:

   

2. Select the ObjectDataSource smart tag and select the Configure Data Source link:

   

3. This launches the Configure Data Source wizard. On the first page of the wizard, uncheck the Show only data components check box, and in the Choose your business object dialog, select the business object that you want to use to fill the items in the DropDownList. For example:

   

4. Click Next. In the Define Data Methods page select a method on the business object that returns a strongly typed entity list or a DataTable. It's preferable to choose a method that returns a strongly typed list of entity objects (using the mmBusinessObject CreateEntityList() or GetEntityList() methods) since it makes setting the other DropDownList properties far easier. For example this method returns a strongly typed list of ProductEntity objects:

   

5. Click the Finish button to close the wizard dialog.

Step 5: Configure the DropDownList to use the Object Data Source

1. Reselect the GridView's smart tag, and select the EditItemTemplate:

   

2. Select the DropDownList within the template column, then go to the Properties Window. In the DataSourceID property's combo box, select the Object Data Source:

   

3. In the DataTextField property, specify the property in the entity object or column in the DataTable that contains the display name of the items to be added to the DropDownList (this combo box contains a list of properties in your entity object). If you are binding to a DataTable column, you must manually enter the column name. If you are working with an entity object, you can select the entity property from the combo box:

   

4. In the DataValueField property, specify the property in the entity object or column in the DataTable that contains the value of items to be added to the DropDownList. This normally corresponds to a foreign key field found in the data bound to the GridView:

   

   To exit template editing mode, go back to your GridView column, reselect its smart tag and click the End Template Editing link:

   

Step 7: Enabling Editing in the GridView

If you haven't already done so, enable editing in the GridView by following the steps outlined in the Help topic Enabling Editing in mmGridView.

Now when you run your web application and edit an item in your GridView, you should see the DropDownList populated with items from your object data source and the currently selected item should be set to the appropriate item based on the value of the column in the GridView's BindingSource: