Multi-Select Chip Group

Nov 21, 2022
2 minutes to read

The Multi-Select Chip Group (MultiSelectChipGroup) is a chip group with multi value selection support.

Add and Remove Chips

Use the Items property to manage chips within the group. You can add, remove, and re-arrange chips as needed.

csharp

using DevExpress.UITemplates.Collection.Editors;

// Populates the chip group.
multiSelectChipGroup1.Items.AddRange(new Chip[] {
    new Chip(0, "Data Management"),
    new Chip(1, "Network Security"),
    new Chip(2, "UI/UX Design"),
    new Chip(3, "HTML & CSS")
});

// Removes the specified chip.
multiSelectChipGroup1.Items.RemoveValue(0);

Auto-Size Mode

Use the chip group’s AutoSizeMode property to specify the direction in which the group grows to display its entire contents.

Value	Description
Default	Disables the auto size mode. Use the `Size` property to specify the chip group’s width and height..
Horizontal	The chip group is automatically resized horizontally to display all its content.
Vertical	The chip group’s height is automatically changed to display all its content.
None	Disables the auto size mode. Use the `Size` property to specify the chip group’s width and height.

Chip Size

Use the ItemSize property to specify the size of chips.

Size	Screenshot
Small
Default
Large

Group Title

Use the Text property to specify the group title.

Selection

Users can select multiple chips. Use the Selection and SelectedValues properties to obtain selected/checked chips and values.

csharp

using DevExpress.UITemplates.Collection.Editors;

// Iterates over the selected/checked chips.
foreach(Chip chip in multiSelectChipGroup1.Selection) {
    // ...
}

Every time the selection changes, the chip group fires the SelectedItemChanged event.

Set the ShowChecks option to false if you do not want to show the check within selected chips.

HTML & CSS Template Customization

The Multi Select Chip Group is created with HTML & CSS templates. This allows you to create fully custom layouts. Template customizations are handled with our HTML Template Editor that is integrated into the Visual Studio IDE. This tool uses an embedded Syntax Editor with autocomplete, tag navigation, and preview.