Edit this page

ComboBox Column

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

Here is a list of the most important properties:

  • DataMemberBinding - you should specify the property of the bound business object to relate to SelectedValueMemberPath from column's ItemsSource.

  • ItemsSource - specifies the data source for the RadComboBox editor. It also takes part when translating the Data Member to the Display member.

  • ItemsSourceBinding - allows binding editor's ItemsSource to a member of the bound data item.

  • DisplayMemberPath - member path to display. It points to a field in the assigned__GridViewComboBoxColumn.ItemsSource__.

  • SelectedValueMemberPath - used in conjunction with DisplayMemberPath in the process of translation of a value to display as content. It also tells the RadComboBox editor which property to use as a Value when the user makes selection.

  • IsComboBoxEditable - allows you to configure whether the editor (RadComboBox) is editable.

The type of properties configured as DataMemberBinding and SelectedValueMembetPath should be the same.

Since Q3 2012 SP typing a letter in GridViewComboBoxColumn will point to the first item starting with the same letter.

The following example assumes that you have data as shown in Figure 1:

Figure 1.:

[XAML] Example 1: Define GridViewComboBoxColumn.

<telerik:RadGridView x:Name="radGridView"
        <telerik:GridViewComboBoxColumn />

[XAML] Example 2: Define DataMemberBinding.

<telerik:RadGridView x:Name="radGridView"
        <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}" />

[C#] Example 2: Define DataMemberBinding.

column.DataMemberBinding = new Binding( "CountryId" );

[C#] Example 3: Setting ItemsSource.

((GridViewComboBoxColumn)this.radGridView.Columns["Country"]).ItemsSource = RadGridViewSampleData.GetCountries();

[VB.NET] Example 3: Setting ItemsSource.

DirectCast(Me.radGridView.Columns("Country"), GridViewComboBoxColumn).ItemsSource = RadGridViewSampleData.GetCountries()

[XAML] Example 4: Configure DisplayMemberPath and SelectedValuePath properties in XAML.

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}"
                                DisplayMemberPath="Name" />

[C#] Example 4: Configure DisplayMemberPath and SelectedValuePath properties in code.

column.SelectedValueMemberPath = "Id";
column.DisplayMemberPath = "Name";

The application result should be similar to Figure 2.:

As illustrated in Figure 2 you can map CountryId property of the business object to the respective value in Countries collection via configuring proper DisplayMemberPath.

You can download a runnable project of the previous example from our online SDK repository:ComboboxColumn.

The next example shows how to use ItemsSourceBinding. It allows you to bind the ItemsSource of RadComboBox editor to a collection held by the data item. In this way, you are able to specify different sets of items depending on the entire content of the respective row. The example assumes that you have the data shown in Figure 3:

Figure 3

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 editor. As in the previous example, it also exposes a DriverID property that the column will later translate to an appropriate display value.

[XAML] Example 5: Configure GridViewComboBoxColumn with ItemsSourceBinding.

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

Figure 4. and Figure 5. show the result of configuring ItemsSourceBinding property.

Figure 4.

Figure 5.

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

You can download a runnable project of the previous example from our online SDK repository:ComboboxColumnItemsSourceBinding.

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

You can download a runnable project suggesting a modification for performance improvement from our online SDK repository: LightweightComboboxColumn.

You can also check the SDK Samples Browser that provides a more convenient approach in exploring and executing the examples in the Telerik XAML SDK repository.

Templating GridViewComboBoxColumn

As of version Q1 2010 SP2, GridViewComboBoxColumn exposes a new property - ItemTemplate - which also applies to the default editor - RadComboBox.

The following example shows how to implement a multi-column ComboBoxColumn.

Start by defining the GridViewComboBoxColumn and its ItemTemplate:

[XAML] Example 6: Configure GridViewComboBoxColumn with ItemTemplate.

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

The multi-column ComboBoxColumn in this example will have two columns showing the ID and Name of the City respectively. When you run the example, Figure 6 shows the result when the customer tries to edit in a column.

Figure 6.

See Also