ComboBoxColumn Class

A grid column used to display and edit text values. The column displays a drop-down list that contains available values.

Namespace: DevExpress.Maui.DataGrid

Assembly: DevExpress.Maui.DataGrid.dll

NuGet Package: DevExpress.Maui.DataGrid

Declaration

public class ComboBoxColumn :
    PickerColumn

Remarks

The ComboBoxColumn is a column in the DataGridView that displays available values in a drop-down list.

The ItemsSource collection contains values that users can select in the drop-down list. If this collection contains business objects, use the following properties to describe the business object’s data fields:

• DisplayMember — specifies the data field that contains values that are displayed in the drop-down list.
• ValueMember — specifies the data field that contains values that are actually assigned to cells.

Options

Use the following properties to adjust column settings:

• IsEditorFilterEnabled — specifies whether users can type values in cells to filter items in the drop-down list.
• EditorFilterCondition — specifies the operator (starts with, contains, etc.) used to compare values in the drop-down list with the text entered in a cell.
• EditorFilterComparisonType — specifies whether to compare values with respect to the current culture and case.
• IsDropDownIconVisible — specifies the drop-down/drop-up icon visibility.

You can configure the following options related to all types of grid columns:

• FieldName — specifies the name of the data source’s field associated with the grid column, or serves as an identifier for an unbound column.
• Caption — specifies the caption displayed in the column header.
• DisplayFormat — specifies the pattern used to format values in the column’s cells.
• HorizontalContentAlignment, VerticalContentAlignment — specify the horizontal and vertical alignment of the column’s content.
• MinWidth, MaxWidth, Width — specify the column’s minimum, maximum, and actual widths.
• IsVisible — specifies whether the column is visible in the grid.

Use the following properties to sort and group data in the grid, and calculate cell values based on expressions:

• AllowSort, SortOrder, SortIndex, SortMode — to sort data.
• IsGrouped, GroupInterval, GroupCaptionDisplayFormat — to group data.
• UnboundExpression, UnboundType — to calculate values in columns that are not bound to a data source.

The grid stores columns in the DataGridView.Columns collection. Depending on the AutoGenerateColumnsMode option, the grid automatically generates columns based on the bound data source, or you can add columns to the grid and associate them with data fields manually. See the following help topic for an example: Create Columns for Different Data Types.

Examples

How to Specify Source of Items in Combo Box Editor

The example below uses the ComboBoxColumn to display available values in the drop-down list when a user types in a cell.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
             xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard">
    <dxg:DataGridView ItemsSource="{Binding Path=Employees}"
                      EditorShowMode="Tap">
        <dxg:DataGridView.Columns>
            <!-- Other columns here. -->
            <dxg:ComboBoxColumn FieldName="JobTitle" 
                                EditorFilterComparisonType="CurrentCultureIgnoreCase"
                                EditorFilterCondition="StartsWith"
                                IsEditorFilterEnabled="True">
                <dxg:ComboBoxColumn.ItemsSource>
                    <scg:List x:TypeArguments="x:String">
                        <x:String>Chief Executive Officer</x:String>
                        <x:String>Chief Technology Officer</x:String>
                        <x:String>Network Administrator</x:String>
                    </scg:List>
                </dxg:ComboBoxColumn.ItemsSource>
            </dxg:ComboBoxColumn>
            <!-- Other columns here. -->
        </dxg:DataGridView.Columns>
    </dxg:DataGridView>
</ContentPage>

C#

using System.Collections.Generic;
using System.ComponentModel;
using Microsoft.Maui.Controls;

public partial class EditingView : ContentPage {
    public EditingView() {
        InitializeComponent();
        BindingContext = new Repository(300);
    }
}

public class Repository {
    public ObservableCollection<Employee> Employees { get; private set; }

    public Repository(int rowsCount) {
        Employees = new ObservableCollection<Employees>();
        for (int i = 0; i < rowsCount; i++) {
            Employees.Add(new Employee());
        }
    }
}

public class Employee {
    public string FullName { get; set; }
    public string JobTitle { get; set; }
}

How to Use Display and Value Members in Combo Box Editor

In the example below, the ComboBoxColumn is bound to a data field that contains integer values. To display strings instead of integers in the drop-down list, the example uses a business object that combines strings with integers. The DisplayMember and ValueMember properties specify data fields that contain displayed strings and actual integer values.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid">
    <dxg:DataGridView x:Name="dataGridView"
                    ItemsSource="{Binding Path=Employees}"
                    EditorShowMode="Tap">
        <dxg:DataGridView.Columns>
            <!-- Other columns here. -->
            <dxg:ComboBoxColumn FieldName="Job" 
                                ItemsSource="{Binding Jobs}"
                                DisplayMember="Title"
                                ValueMember="Id"
                                IsEditorFilterEnabled="True">
            </dxg:ComboBoxColumn>
            <!-- Other columns here. -->
        </dxg:DataGridView.Columns>
    </dxg:DataGridView>
</ContentPage>

C#

using System.Collections.Generic;
using System.ComponentModel;
using Microsoft.Maui.Controls;

public partial class EditingView : ContentPage {
    public EditingView() {
        InitializeComponent();
        BindingContext = new Repository(300);
    }
}

public class Repository {
    public ObservableCollection<Employee> Employees { get; private set; }
    public ObservableCollection<Job> Jobs { get; private set; }

    public Repository(int rowsCount) {
        Employees = new ObservableCollection<Employees>();
        Jobs = new ObservableCollection<Job>();
        for (int i = 0; i < rowsCount; i++) {
            Employees.Add(new Employee());
            Jobs.Add(new Job());
        }
    }
}

public class Employee {
    public string FullName { get; set; }
    public int Job { get; set; }
}

public class Job {
    public int Id { get; set; }
    public string Title { get; set; }
}

Implements

INotifyPropertyChanged

Inheritance

Object

BindableObject

GridColumn

TextColumnBase

PickerColumn

ComboBoxColumn