Version

Please note that this control has been retired and is now obsolete to the XamDataGrid control, and as such, we recommend migrating to that control. It will not be receiving any new features, bug fixes, or support going forward. For help or questions on migrating your codebase to the XamDataGrid, please contact support.

ComboBoxColumn Column

The column of type ComboBoxColumn allows the users to edit the cell value of the xamGrid control by selecting a value from a pre-populated drop-down list of items.

Following is a picture of the xamGrid with a ComboBoxColumn:

xamGrid ComboBoxColumn Column 01.png

Figure 1: The xamGrid with a ComboBoxColumn column

The following list describes the key properties for ComboBoxColumn:

  • ItemsSource – specifies the data source for the ComboBoxColumn column

  • ItemTemplate – specifies the data template to be used, which allows you to customize the way the items are displayed in the column

  • DisplayMemberPath – specifies the data property of the item source to be displayed in the ComboBoxColumn

  • SelectedValuePath – specifies the value that is returned when the user selects a value from the drop-down list

The following code snippet demonstrates how to add a ComboBoxColumn column to the xamGrid control.

In XAML:

 <ig:ComboBoxColumn Key="Category" Width="120"
                    HorizontalContentAlignment="Stretch"
                    ItemsSource="{Binding Source={StaticResource optionsList}}"
                    SelectedValuePath="Name"
                    DisplayMemberPath="Name">

By default, the ComboBoxColumn column displays the cell’s value in the drop down list. However, you can change this default display through the use of templates.

To do this, set the ComboBoxColumn column’s ItemTemplate property to an instance of a data template, as demonstrated in the following code snippet.

In XAML:

<ig:ComboBoxColumn Key="Category" Width="200" HorizontalContentAlignment="Stretch"
                   ItemsSource="{Binding Source={StaticResource optionsList}}"
                   SelectedValuePath="Name"
                   AllowEditingValidation=">
   <ig:ComboBoxColumn.ItemTemplate>
      <DataTemplate>
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="20" />
               <ColumnDefinition Width="20" />
               <ColumnDefinition Width="160" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding ID}" Grid.Column="0" />
            <TextBlock Text=" |" Grid.Column="1" />
            <TextBlock Text="{Binding Name}" Grid.Column="2" />
         </Grid>
      </DataTemplate>
   </ig:ComboBoxColumn.ItemTemplate>
</ig:ComboBoxColumn>

The following picture shows the ComboBoxColumn set to an instance of data template.

xamGrid ComboBoxColumn Column 02.png

Figure 2: ComboBoxColumn set to an instance of a data template*