ComboListCell creates an editable combo box cell: users can type freely, rely on auto-completion, or pick from a drop-down list. Unlike DropdownListCell (selection-only), ComboListCell accepts new values typed by the user.

Namespace

using unvell.ReoGrid.CellTypes;

Create a Combo List Cell

var sheet = grid.CurrentWorksheet;
var combo = new ComboListCell("Apple", "Banana", "Orange", "Applause", "Appreciate");
sheet.Cells["C3"].Body = combo;

Constructors

ConstructorDescription
ComboListCell()Empty combo list
ComboListCell(params string[] candidates)Create with string items
ComboListCell(List<string> candidates)Create with a mutable list (stays linked)
ComboListCell(IEnumerable<string> candidates)Create with any collection
ComboListCell(ReferenceRange refRange)Create using a cell range as the data source

Using a Mutable List

Pass a List<string> to keep items in sync. New items added to the list appear in the dropdown:

var items = new List<string> { "Alpha", "Beta", "Gamma" };
var combo = new ComboListCell(items);
sheet["B5"] = combo;

items.Add("Delta"); // immediately available in the dropdown

Using a Cell Range

Bind to a range so the list reflects current cell contents:

var combo = new ComboListCell(sheet.Ranges["A2:A20"]);
sheet["D2"] = combo;

Properties

ComboListCell Properties

PropertyTypeDefaultDescription
SelectedItemobjectThe currently selected item
SelectedIndexintIndex of the selected item
EnableAutoCompletionbooltrueEnable auto-completion while typing
AutoCompleteCompareratorFunc<string, string, bool>prefix matchCustom comparison function
CandidationListSearchProviderFunc<object, IList<string>>nullCustom search provider for large/remote datasets

Inherited from DropdownCell

PropertyTypeDefaultDescription
PullDownOnClickboolfalseOpen drop-down when cell is clicked
DropdownButtonSizeRGSize16x16Size of the drop-down button
DropdownButtonAutoHeightbooltrueAuto-adjust button height to match cell
IsDropdownboolWhether the drop-down panel is currently open
DropdownPanelHeightint200Height of the drop-down panel
MinimumDropdownWidthint40Minimum width of the drop-down panel
MaximumDropdownWidthint1200Maximum width of the drop-down panel
DropdownControlControlThe platform control in the panel
DropdownButtonStyleDropdownCellStyleVisual style of the drop-down button

Events

EventDescription
SelectedItemChangedRaised when the selected item changes
DropdownOpenedRaised when the drop-down panel opens (inherited)
DropdownClosedRaised when the drop-down panel closes (inherited)
combo.SelectedItemChanged += (s, e) =>
{
    Console.WriteLine($"Selected: {combo.SelectedItem}");
};

Methods

MethodDescription
PushDown(bool forceCellEdit = true)Programmatically open the drop-down panel
PullUp()Close the drop-down panel
Clone()Create a copy of this cell body

Auto-Completion

Auto-completion is enabled by default. As the user types, matching items are suggested and the remaining text is auto-filled.

Disable Auto-Completion

combo.EnableAutoCompletion = false;

Custom Comparison Logic

The default comparison uses a case-insensitive prefix match (StartsWith). Override it for different behavior:

// Substring match instead of prefix match
combo.AutoCompleteComparerator = (item, text) =>
{
    if (string.IsNullOrWhiteSpace(text)) return false;
    return item.Contains(text, StringComparison.OrdinalIgnoreCase);
};

The function signature is Func<string, string, bool> where:

  • First parameter: the candidate item text
  • Second parameter: the text the user has typed
  • Return true to include the item in suggestions

Custom Search Provider

For large or remote datasets, supply a search provider that returns filtered candidates dynamically:

combo.CandidationListSearchProvider = text =>
{
    return ProductSearch(text?.ToString())
        .Take(20)
        .ToList();
};

The function signature is Func<object, IList<string>> where:

  • Parameter: the text currently typed by the user
  • Return: the filtered list of candidates to display

When a search provider is set, it replaces the default filtering behavior entirely.

Capturing New Values

Since ComboListCell allows free text input, users can type values not in the original list. Capture these and add them for future suggestions:

var items = new List<string> { "Alpha", "Beta" };
var combo = new ComboListCell(items);
sheet["B5"] = combo;

sheet.AfterCellEdit += (s, e) =>
{
    if (ReferenceEquals(e.Cell.Body, combo) &&
        e.NewData is string text &&
        !string.IsNullOrWhiteSpace(text) &&
        !items.Contains(text))
    {
        items.Add(text);
    }
};

Keyboard Behavior

KeyAction
Up / DownNavigate through the suggestion list
Enter / SpaceConfirm the highlighted item
TabConfirm and move to the next cell
EscapeClose the drop-down without selecting

WPF Styling

On WPF, customize the list appearance through the Style property:

#if WPF
combo.Style.TextColor = SolidColor.DarkBlue;
combo.Style.BackColor = SolidColor.LightYellow;
combo.Style.FontSize = 14;
combo.Style.FontWeight = FontWeights.Bold;
#endif

ComboListStyle Properties (WPF Only)

PropertyTypeDescription
TextColorSolidColorText color in the list
BackColorSolidColorBackground color
FontFontFamilyFont family
FontWeightFontWeightFont weight
FontSizedoubleFont size
FontStyleFontStyleFont style
HorizontalAlignmentHorizontalAlignmentItem horizontal alignment
VerticalAlignmentVerticalAlignmentItem vertical alignment
PaddingPaddingValueItem padding
Reset()methodReset to default style

Override the ListBox Template (WPF)

Swap in a custom ControlTemplate/ItemTemplate for the drop-down ListBox:

<Window.Resources>
    <ControlTemplate x:Key="ReoGridComboListTemplate" TargetType="ListBox">
        <Border Background="#101820" CornerRadius="6" Padding="4">
            <ScrollViewer Focusable="False">
                <ItemsPresenter />
            </ScrollViewer>
        </Border>
    </ControlTemplate>

    <DataTemplate x:Key="ReoGridComboItemTemplate">
        <StackPanel Orientation="Horizontal" Margin="4,2">
            <Ellipse Width="6" Height="6" Fill="#FF7A00" Margin="0,0,6,0"/>
            <TextBlock Text="{Binding}" Foreground="White"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

Wire it up in code:

#if WPF
combo.DropdownOpened += (s, e) =>
{
    if (((ComboListCell)s).DropdownControl is ListBox listBox)
    {
        listBox.Template = (ControlTemplate)FindResource("ReoGridComboListTemplate");
        listBox.ItemTemplate = (DataTemplate)FindResource("ReoGridComboItemTemplate");
    }
};
#endif

Extending ComboListCell

Subclass ComboListCell for deeper customization:

class ProductComboCell : ComboListCell
{
    private readonly ProductService _service;

    public ProductComboCell(ProductService service) : base()
    {
        _service = service;
        CandidationListSearchProvider = text =>
            _service.Search(text?.ToString()).Select(p => p.Name).ToList();
    }
}

Comparison: DropdownListCell vs ComboListCell

FeatureDropdownListCellComboListCell
Select from listYesYes
Type free textNoYes
Auto-completionNoYes (configurable)
Custom search providerNoYes
Accepts new valuesNoYes

Class Hierarchy

CellBody
  └─ DropdownCell (panel, button, open/close)
       └─ DropdownListBaseCell (candidate source)
            ├─ DropdownListCell (selection-only)
            └─ ComboListCell (editable + auto-complete)
Was this article helpful?