Edit this page

ComboBox Column

The GridViewComboBoxColumn derives from the GridViewBoundColumnBase, which means that it inherits all of the functionality too. In addition, GridViewComboBoxColumn 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 - 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 - 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.

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

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

Figure 1

Define a GridViewComboBoxColumn.


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

You’ll find the columns in the same namespace as the RadGridView control.


GridViewComboBoxColumn column = new GridViewComboBoxColumn();
this.radGridView.Columns.Add( column );


Dim column As New GridViewComboBoxColumn()
Me.radGridView.Columns.Add( column )

Define the DataMemberBinding and give the column an UniqueName.


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


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


column.DataMemberBinding = New Binding("CountryId")
column.UniqueName = "Country"

Set the ItemsSource property.


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


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

Set the DisplayMemberPath and the SelectedValuePath properties.


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


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


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

Now run the application. The application result should be similar to Figure 2

Figure 2

You can see in Figure 2 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.

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 data shown in Figure 3:

Figure 3

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 that the ComboBox column will later translate to an appropriate display value.

Define the GridViewComboBoxColumn with the following properties set.


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

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

Figure 4


Figure 5

When using the 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 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.

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 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).

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

Start by defining the GridViewComboBox column and its 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 ComboBox 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