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.

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

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

  • DisplayMemberPath - member path to display. It points to a field in the 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.

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"
                     AutoGenerateColumns="False">
    <telerik:RadGridView.Columns>
        <telerik:GridViewComboBoxColumn />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

[XAML] Example 2: Define DataMemberBinding and specify an UniqueName.

<telerik:RadGridView x:Name="radGridView"
                     AutoGenerateColumns="False">
    <telerik:RadGridView.Columns>
        <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}"
                                        UniqueName="Country" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

[C#] Example 2: Define DataMemberBinding and specify an UniqueName.

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

[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: Set DisplayMemberPath and SelectedValuePath properties.

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}"
                                UniqueName="Country"
                                SelectedValueMemberPath="Id"
                                DisplayMemberPath="Name" />

[C#] Example 4: Set DisplayMemberPath and SelectedValuePath properties.

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

The application result should be similar to Figure 2

Figure 2

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

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 ItemsSourceBinding. It allows you to bind the ItemsSource of the 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}"
                                UniqueName="Driver"
                                ItemsSourceBinding="{Binding CurrentDrivers}"
                                SelectedValueMemberPath="ID"
                                DisplayMemberPath="Name" />

Figure 4 and Figure 5 show the result of setting 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 here, the example is listed as GridView/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 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 Q1 2010 SP2, GridViewComboBoxColumn exposes a new property - ItemTemplate, which also applies to the default editor of that column - 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"
                                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>

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 what happens when the customer tries to edit in a column.

Figure 6

See Also