New to Telerik UI for WinUI? Download free 30-day trial

ComboBox Column

The DataGridComboBoxColumn inherits from the DataGridTextColumn and in EditMode it uses a ComboBox control to select a value from list of possibilities.

Key Properties

Here are the specific properties defined for DataGridComboBoxColumn:

  • ItemsSource (IEnumerable<object>): This property is used when the source of the ComboBox items is not part of the data and is the same for all items in the grid.
  • ItemsSourcePath (string): This property is used to specify a property of your data class to be used as source for the ComboBox.
  • DisplayMemberPath (string): Sets the display path of the items in the ComboBox selector. It points to a field in the items from the ItemsSource collection of the ComboBox.
  • SelectedValuePath (string): Sets the value that is actually selected in the ComboBox (could be different from the display value) and is passed to the property that is edited in the ComboBox column.

Examples

The following examples demonstrate different scenarios in which the DataGridComboBoxColumn can be used.

ItemsSource Example

The ItemsSource property is used when the source of the ComboBox items in edit mode are the same for all items in the column. First we need to create our business object.

ItemsSource property

Example 1: Create Data model

public class Data 
{ 
    public string Currency { get; set; }     
    public double Price { get; set; } 
    public string Item { get; set; } 
} 
The next step is to define a class that will be used as a static ComboBox source provider:

Example 2: Create ComboBox Source Provider

public class ExternalItemsProvider 
{ 
    private static readonly List<string> items = new List<string> { "CHF", "JPY", "RUB", "USD", }; 
 
    public static List<string> Items 
    { 
        get 
        { 
            return items; 
        } 
    } 
} 
Then we can define an instance of this class as a static resource in the page:

Example 3: Declare it in XAML

<Page.Resources> 
    <local:ExternalItemsProvider x:Key="items"/> 
</Page.Resources> 
The final step is to create a sample data and declare the RadDataGrid in XAML.

Example 4: Create Sample Data

public MainPage() 
{ 
    this.InitializeComponent();  
    this.DataContext = new List<Data> 
    { 
        new Data { Item = "theater tickets", Price = 20, Currency = "CHF"}, 
        new Data { Item = "dinner", Price = 33.5, Currency = "JPY"}, 
        new Data { Item = "winter shoes", Price = 50, Currency = "USD"}, 
        new Data { Item = "travel expenses", Price = 22, Currency = "USD"} 
    }; 
}    

Example 5: Defining in XAML

<telerikGrid:RadDataGrid x:Name="grid" UserEditMode="Inline" AutoGenerateColumns="False" ItemsSource="{Binding}"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Item"/> 
        <telerikGrid:DataGridNumericalColumn PropertyName="Price"/> 
        <telerikGrid:DataGridComboBoxColumn PropertyName="Currency" ItemsSource="{Binding Items, Source={StaticResource items}}" /> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 1: ComboBox Column With ItemsSource

ItemsSourcePath Example

The ItemsSourcePath property is used when the source of each ComboBox in edit mode is retrieved from a property of the DataItem.

ItemsSource property

This time the Data class has a property that provides values for the ComboBox source:

Example 6: Add ComboBox Source

public class Data 
{ 
    public string Brand { get; set; }        
    public string Item { get; set; }         
    public List<string> Brands { get; set; } 
} 

Example 7: Create Sample Data

public MainPage() 
{ 
    this.InitializeComponent();  
    this.DataContext = new List<Data> 
    { 
        new Data { Item = "car", Brand = "Honda", Brands = new List<string> { "Honda", "Volvo", "Mercedes" } }, 
        new Data { Item = "bike", Brand = "Scott", Brands = new List<string> { "Scott", "Giant", "Trek" } } 
    };  
}    

Example 8: Set ItemsSourcePath Property in XAML

<telerikGrid:RadDataGrid x:Name="grid" UserEditMode="Inline" AutoGenerateColumns="False" UserGroupMode="Enabled" Width="300" Height="350" ItemsSource="{Binding}"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Item"/> 
        <telerikGrid:DataGridComboBoxColumn PropertyName="Brand" ItemsSourcePath="Brands"/> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 2: ComboBox Column With ItemsSourcePath

SelectedValuePath Example

In a scenario when the grid has a property that is of primitive type, but the ComboBox source holds complex objects, you should set the SelectedValuePath property in order to determine which property of the complex object will be passed as a value for the grid item's property. The DisplayMemberPath and SelectedValuePath could point to different properties of the ComboBox items and this example will demonstrate such scenario.

Please, note that the class should override the Equals method in order to successfully determine whether the model property and the ComboBox source item have the same value. Also, the class has to implement the IComparable interface if sorting is enabled.

The ComboBox will use a static source of CurrencyInfo objects as described in the previous examples. First we can go ahead and create our data models.

Example 9: Create Data Models

public class ExternalItemsProvider 
{ 
    private static readonly List<CurrencyInfo> items = new List<CurrencyInfo> { 
            new CurrencyInfo(){ Abbrev= "CHF" }, 
            new CurrencyInfo(){Abbrev="JPY" }, 
            new CurrencyInfo(){ Abbrev="RUB" }, 
            new CurrencyInfo(){Abbrev="USD" }, 
    }; 
    public static List<CurrencyInfo> Items 
    { 
        get 
        { 
            return items; 
        } 
    } 
} 
public class CurrencyInfo : IComparable 
{ 
    public string Name { get; set; } 
    public string Abbrev { get; set; } 
    public int CompareTo(object obj) 
    { 
        return this.Abbrev.CompareTo(((CurrencyInfo)obj).Abbrev); 
    } 
    public override bool Equals(object obj) 
    { 
        var data = obj as CurrencyInfo; 
        return data != null && data.Abbrev == this.Abbrev && data.Name == this.Name; 
    } 
} 
public class Data 
{ 
    public CurrencyInfo Currency { get; set; }       
    public string Item { get; set; }         
    public double Price { get; set; } 
} 
Now we can create sample data to populate the RadDataGrid with.

Example 10: Create Sample Data

public MainPage() 
{ 
    this.InitializeComponent();  
    this.DataContext = new List<Data> 
    { 
        new Data { Item = "theater tickets", Price = 20, Currency = new CurrencyInfo { Abbrev = "CHF", Name = "Swiss franc" } }, 
        new Data { Item = "dinner", Price = 33.5, Currency = new CurrencyInfo { Abbrev = "JPY", Name = "Japanese yen" } }, 
        new Data { Item = "winter shoes", Price = 50, Currency = new CurrencyInfo { Abbrev = "USD", Name = "United States dollar" } }, 
        new Data { Item = "travel expenses", Price = 22, Currency = new CurrencyInfo { Abbrev = "USD", Name = "United States dollar" } } 
    }; 
}    
The final step is to declare our RadDataGrid in XAML and configure the DataGridComboBoxColumn column.

Example 11: Set SelectedValuePath Property in XAML

<telerikGrid:RadDataGrid x:Name="grid" UserEditMode="Inline" AutoGenerateColumns="False" UserGroupMode="Enabled" Width="500"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Item"/> 
        <telerikGrid:DataGridNumericalColumn PropertyName="Price"/> 
        <telerikGrid:DataGridComboBoxColumn PropertyName="Currency" ItemsSource="{Binding Items, Source={StaticResource items}}" SelectedValuePath="Abbrev" DisplayMemberPath="Name"/> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Dynamic Objects Example

DataGridComboBoxColumn could also be used with dynamic objects. We will use the previous example, but instead of DataItem we will use ExpandoObject in the grid ItemsSource and we will define its properties dynamically.

Example 12: Use ExpandoObject to populate RadDataGrid

public MainPage() 
{ 
    this.InitializeComponent();  
    var collection = new List<ExpandoObject>(); 
    dynamic car = new ExpandoObject(); 
    car.Item = "car"; 
    car.Price = 30000; 
    car.Currency = "USD"; 
    collection.Add(car); 
 
    dynamic house = new ExpandoObject(); 
    house.Item = "house"; 
    house.Price = "200000"; 
    house.Currency = "CHF"; 
    collection.Add(house); 
 
    this.grid.ItemsSource = collection; 
}    
In this article
Not finding the help you need?