Grouping in Angular Multi select component

26 Aug 20259 minutes to read

The MultiSelect component supports organizing list items into groups based on different categories. Each list item’s category can be mapped through the groupBy field within the fields property configuration. The component displays group headers in two ways: inline headers that appear within the list flow, and fixed headers that remain visible at the top of the popup while scrolling through grouped content. The fixed group header dynamically updates to show the currently visible group’s category value.

In the following sample, vegetables are grouped according to their category using the groupBy field.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'




import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, MultiSelectModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiSelect component
    template: `<ejs-multiselect id='multiselectelement' [dataSource]='vegetableData' [fields]='fields'[placeholder]='placeholder' [popupHeight]='height'></ejs-multiselect>`
})
export class AppComponent {
    constructor() {
    }
    //define the data with category
    public vegetableData: { [key: string]: Object }[] = [
        { vegetable: 'Cabbage', category: 'Leafy and Salad', id: 'item1' },
        { vegetable: 'Spinach', category: 'Leafy and Salad', id: 'item2' },
        { vegetable: 'Wheat grass', category: 'Leafy and Salad', id: 'item3' },
        { vegetable: 'Yarrow', category: 'Leafy and Salad', id: 'item4' },
        { vegetable: 'Pumpkins', category: 'Leafy and Salad', id: 'item5' },
        { vegetable: 'Chickpea', category: 'Beans', id: 'item6' },
        { vegetable: 'Green bean', category: 'Beans', id: 'item7' },
        { vegetable: 'Horse gram', category: 'Beans', id: 'item8' },
        { vegetable: 'Garlic', category: 'Bulb and Stem', id: 'item9' },
        { vegetable: 'Nopal', category: 'Bulb and Stem', id: 'item10' },
        { vegetable: 'Onion', category: 'Bulb and Stem', id: 'item11' }
    ];
    // map the groupBy field with category column
    public fields: Object = { groupBy: 'category', text: 'vegetable', value: 'id' };
    // Set the popup list height
    public height: string = '200px';
    // set the placeholder to the MultiSelect input
    public placeholder: string = 'Select vegetables';
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customization

The grouping header provides customization options that allow custom styling and content design. Use the groupTemplate property to create custom templates for both inline and fixed group headers. This enables complete control over the appearance and layout of group header content to match application-specific design requirements.

Grouping with CheckBox

The MultiSelect component supports rendering checkboxes in group headers to enable selection of all items within a group through a single click. Enable this feature by setting the enableGroupCheckBox property to true and the mode property to CheckBox.

Note: The CheckBoxSelection module must be injected into the MultiSelect component to use checkbox functionality.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'




import { Component, OnInit } from '@angular/core';
import { CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, MultiSelectModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiSelect component
    template: `<ejs-multiselect id='multiselectelement' [dataSource]='vegetableData' [fields]='fields'[placeholder]='placeholder' [popupHeight]='height' [mode]='mode' [enableGroupCheckBox]='enableGroupCheckBox' [allowFiltering]='allowFiltering' [filterBarPlaceholder]='filterBarPlaceholder' [showSelectAll]='showSelectAll'></ejs-multiselect>`,
    providers: [CheckBoxSelectionService]
})
export class AppComponent {
    public mode?: string;
    constructor() {
    }
    //define the data with category
    public vegetableData: { [key: string]: Object }[] = [
        { vegetable: 'Cabbage', category: 'Leafy and Salad', id: 'item1' },
        { vegetable: 'Spinach', category: 'Leafy and Salad', id: 'item2' },
        { vegetable: 'Wheat grass', category: 'Leafy and Salad', id: 'item3' },
        { vegetable: 'Yarrow', category: 'Leafy and Salad', id: 'item4' },
        { vegetable: 'Pumpkins', category: 'Leafy and Salad', id: 'item5' },
        { vegetable: 'Chickpea', category: 'Beans', id: 'item6' },
        { vegetable: 'Green bean', category: 'Beans', id: 'item7' },
        { vegetable: 'Horse gram', category: 'Beans', id: 'item8' },
        { vegetable: 'Garlic', category: 'Bulb and Stem', id: 'item9' },
        { vegetable: 'Nopal', category: 'Bulb and Stem', id: 'item10' },
        { vegetable: 'Onion', category: 'Bulb and Stem', id: 'item11' }
    ];
    // map the groupBy field with category column
    public fields: Object = { groupBy: 'category', text: 'vegetable', value: 'id' };
    // Set the popup list height
    public height: string = '200px';
    // set the placeholder to the MultiSelect input
    public placeholder: string = 'Select vegetables';
    // set value of enableGroupCheckBox to true
    enableGroupCheckBox: boolean = true;
    // set value of allowFiltering to true
    allowFiltering: boolean = true;
    // set the placeholder to the filterbar
    filterBarPlaceholder: string = "Search Vegetables";
    // set the value of showSelectAll as true
    showSelectAll: boolean = true;
    ngOnInit(): void {
        // set the type of mode for checkbox to visualized the checkbox added in li element.
        this.mode = 'CheckBox';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: When using the MultiSelect component with CheckBox mode and grouping enabled, the enableSelectionOrder property (default to true) causes selected items to move out of their original group headers in the popup. To keep selected items under their respective group headers, set enableSelectionOrder to false.

See Also