Main Menu
Knowledge Base
Product Registration
Log an Incident
Request a Feature
Search Incidents/Bug Reports


Search KB

Please note: In an effort to better serve you, we are in the process of restructuring DevCenter. In the process, we have moved many items that you may be used to finding in DevCenter over to the Main Site. If you are having trouble locating something, please try looking at the following places:

Knowledge Base Article: KB07698

HOWTO:Creating a Multi-Select Dropdown Combo for the WinGrid


The information in this article applies to:
UltraWinGrid (v5.2.20052)
  Article Created: 
7/11/2005

Last Updated:
8/10/2006

Article Type
How To
  
Page Options
Average Rating:
5 out of 10

Rate this page
Print this page
E-mail this page
Add to Favorites

Summary

The WinCombo does not support multiple selections however, with some creative coding, we can create our own multi-select control and embed this into the WinGrid.

Additional Information

To achieve this functionality, we will leverage the Grid's ability to embed any IProvidesEmbeddableEditor implementing control into its columns. We will essentially build what appears to be a Dropdown WinCombo using a WinGrid that is connected to an Infragistics text editor’s Dropdown Button.

Step-By-Step Example

The Main Grid
The first thing that we will need is a WinGrid to display our main data. One of the columns in this main grid will contain a field that will be populated by the Dropdown.

Creating the Multi Select Combo

The first thing we will do is drag and drop another WinGrid onto the windows form and configure it to behave like a multi select combo. It is up to you how a multi select combo should behave, so if you want checks placed in each row, or perhaps coloring the selected rows a certain way, you can set the properties in order for the Grid to behave in that fashion. This Grid will then be bound to the lookup data that will represent the multi select list.

Next we need to drag and drop an UltraTextEditor onto the windows form. This editor will be the control that we embed into the column that will contain the dropdown.

Next we will instantiate and create an Infragistics.Win.UltraWinEditors.DropDownEditorButton and set its 'Control' property to the other WinGrid that we just created. This button will then be added to the text editor's 'ButtonsRight' collection. This will cause a button to appear inside the text editor and whenever we click this button, the Grid will drop down like when we embed the WinCombo in a WinGrid column.

Finally, we will assign the text editor to the main WinGrid's column that was designated to contain the multi select combo.

The Events

The behavior that we wish to accomplish should be to first click the cell's button to cause our Dropdown to show. Once the Dropdown shows, we will select one or many rows. Once the Combo collapses, we want to populate the current cell's value with whatever was selected in the Combo.

To accomplish this, the Text Editors have an event called 'AfterEditorButtonCloseUp' which is raised immediately after the control associated with the TextBox button closes up and hides. We will use this event to first test to make sure that we do have an active row, and if we do, then simply copy the value from a field in the active row to the WinGrid's active cell:

In VB.NET:

Private Sub UltraTextEditor1_AfterEditorButtonCloseUp(ByVal sender As Object, ByVal e As Infragistics.Win.UltraWinEditors.EditorButtonEventArgs) Handles UltraTextEditor1.AfterEditorButtonCloseUp
        If Me.theMultiSelectGrid.ActiveRow Is Nothing Then Return
        Me.UltraGrid1.ActiveCell.Value = Me.theMultiSelectGrid.ActiveRow.Cells(1).Value
End Sub

In C#:

private void UltraTextEditor1_AfterEditorButtonCloseUp (object sender, Infragistics.Win.UltraWinEditors.EditorButtonEventArgs e)
{
    if (this.theMultiSelectGrid.ActiveRow == null)
        return;

    this.UltraGrid1.ActiveCell.Value = this.theMultiSelectGrid.ActiveRow.Cells[1].Value;
}

In this event, you can also take care of the data persistence. You may want to iterate through the selected rows of the Combo and write each of these records to the Database.

Considerations

There are several considerations to think about when creating a working application that has this functionality. In this example, the logic is fairly simple. In a more advanced scenario, you will need to think of which row's field you wish to display in the WinGrid cell once multiple selections are made. If you think about it, you will have one or many rows that can be selected, but only one value can be shown at a time in a WinGrid cell. You may also want to think about having the actual column that receives the 'value' that represents the foreign key as a hidden column, and then have an unbound column that will be dedicated to show this multi select combo. Upon closeup, you can populate the current row's hidden cell and then update the unbound cell's value with the display text of one of your selected rows. You can also include logic to select the row that is associated with the current WinGrid cell by examining the value in the current cell that is being edited, and then use the Text Editor's BeforeEditorButtonDropDown event to locate the corresponding row in the Combo and activating it. This will cause the Row within our Combo to be selected and associated with the cell that is currently being edited.

Summary

This simple pattern can be easily used and extended to fit a variety of requirements that revolve around the need to have a multiple select dropdown list that is part of the WinGrid. To see a working implementation of this in action, please download the samples and review the code and comments.

Samples

wingrid_wincombo_multi_select_dropdown_2005v1_vb.zip
 VB.NET


wingrid_wincombo_multi_select_dropdown_2005v1_cs.zip
 C#



How would you rate the quality of this content?
Poor -----------------------------------------> Outstanding

Tell us why you rated the content this way. (optional)