Telerik UI for WPF

The GridViewComboBoxColumn derives from the GridViewBoundColumnBase , which means that it inherits all of the functionality too. In addition, it provides a ComboBox editor for editing cell values. It also takes care to translate the DataMember value of the column to the corresponding DisplayMember value of the ComboBox.

Here is a list of the most important properties.

  • ItemsSource - specifies the data source for the ComboBox editor. It also takes part when translating the DataMember to the Display member.
  • ItemsSourceBinding - allows you to bind the ItemsSource of the ComboBox to a property of the data source item.
  • DisplayMemberPath - this one is used to translate a value to cell content(e.g. the ID of a country to the Name of the country). It points to a field in the GridViewComboBoxColumn.ItemsSource.
  • SelectedValueMemberPath - this one is used in conjunction with the DisplayMemberPath in the process of translation of a value to display content. It also tells the ComboBox editor which property to use as a value when the user makes selection. Here you can see how to define a column of this type.
  • IsComboBoxEditable - allows you to set the whether the combobox is editable.
Note

After Q3 2012 Service Pack typing a letter in GridViewComboBoxColumn will point to the first ComboBox item that starts with the same letter.

The following example assumes that you have the following data:

Define a GridViewComboBoxColumn.

CopyXAML
<telerik:RadGridView x:Name="radGridView"
                         AutoGenerateColumns="False">
    <telerik:RadGridView.Columns>
        <telerik:GridViewComboBoxColumn />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>
Note

The columns are to be found in the same namespace as the RadGridView control.

CopyC#
GridViewComboBoxColumn column = new GridViewComboBoxColumn();
this.radGridView.Columns.Add( column );
CopyVB.NET
Dim column As New GridViewComboBoxColumn()
Me.radGridView.Columns.Add( column )

Define the DataMemberBinding and give the column an UniqueName.

CopyXAML
<telerik:RadGridView x:Name="radGridView"
                         AutoGenerateColumns="False">
    <telerik:RadGridView.Columns>
        <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}"
                                            UniqueName="Country" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>
CopyC#
column.DataMemberBinding = new Binding( "CountryId" );
column.UniqueName = "Country";
CopyVB.NET
column.DataMemberBinding = New Binding("CountryId")
column.UniqueName = "Country"

Set the ItemsSource property.

CopyC#
( ( GridViewComboBoxColumn )this.radGridView.Columns[ "Country" ] ).ItemsSource = RadGridViewSampleData.GetCountries();
CopyVB.NET
DirectCast(Me.radGridView.Columns("Country"), GridViewComboBoxColumn).ItemsSource = RadGridViewSampleData.GetCountries()

Set the DisplayMemberPath and the SelectedValuePath properties.

CopyXAML
<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}"
                                    UniqueName="Country"
                                    SelectedValueMemberPath="Id"
                                    DisplayMemberPath="Name" />
CopyC#
column.SelectedValueMemberPath = "Id";
column.DisplayMemberPath = "Name";
CopyVB.NET
column.SelectedValueMemberPath = "Id"
column.DisplayMemberPath = "Name"

After starting the application the result should be similar to this.

You can see that via the DisplayMemberPath property of the GridViewComboBoxColumn you have mapped the CountryId property of the business object to the respective value in the Countries collection.

Tip

You can download a runnable project of the previous example from our online SDK repository here, the example is listed as GridView / ComboboxColumn .

The next example shows how to use the ItemsSourceBinding property. It allows you to bind the ItemsSource of the ComboBox editor to a collection that is held by the data item. In this way you are able to specify different sets of items for the editors that depend on the entire content of the respective row. The example assumes that you have the following data:

The RadGridView binds to a collection of objects representing the teams. The team object exposes a collection containing the current drivers, which is used as source for the ComboBoxEditor. As in the previous example, it also exposes a DriverID property which the ComboBox column will later translate to an appropriate display value.

Define the GridViewComboBoxColumn with the following properties set.

CopyXAML
<telerik:GridViewComboBoxColumn Header="Driver"
                                    DataMemberBinding="{Binding DriverID}"
                                    UniqueName="Driver"
                                    ItemsSourceBinding="{Binding CurrentDrivers}"
                                    SelectedValueMemberPath="ID"
                                    DisplayMemberPath="Name" />

Here it is shown how the result should look like, when using the ItemsSourceBinding property.

and

Note

When using ItemsSourceBinding, the values displayed in the column’s filtering control will be the values corresponding to the DataMemberBinding (0, 1, 2). If you want to be the displayed ones (S.Vettel, K. Raikkonen, M. Webber), then you need to set FilterMemberPath to a property containing the values used as DisplayMemberPath in the GridViewComboBoxColumn.

Tip

You can download a runnable project of the previous example from our online SDK repository here, the example is listed as GridView / ComboboxColumnItemsSourceBinding .

Note

If you are using GridViewComboBoxColumn's ItemsSource property you should specify a valid Source for it. Please refer to this help article.

Templating the ComboBox column

As of Q1 2010 SP2, the GridViewComboBoxColumn provides a new property - ItemTemplate, which applies to the column in read-only mode and in edit mode (actually it applies to the RadComboBox that is the default editor of that column).

In the following example you will see how to implement a multi-column combobox column.

Define the GridViewComboBox column and its ItemTemplate:

CopyXAML
<telerik:GridViewComboBoxColumn Header="City"
                                DisplayMemberPath="Name"
                                SelectedValueMemberPath="ID"
                                ItemsSource="{Binding Path=Cities, Source={StaticResource mainPageViewModel}}"
                                Width="*"
                                DataMemberBinding="{Binding CityID}">
    <telerik:GridViewComboBoxColumn.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding ID}"></TextBlock>
                <TextBlock Text="{Binding Name}"  Grid.Column="1"></TextBlock>
            </Grid>
        </DataTemplate>
    </telerik:GridViewComboBoxColumn.ItemTemplate>
</telerik:GridViewComboBoxColumn>

Our multi-column combobox will have two columns showing the ID and Name of the City respectively. That is all you need to do.

Here is the result:

See Also