How to Display the Actual Selected Values in Angular MultiSelect within an Accordion

When using a MultiSelect component within an Accordion, it is common to encounter an issue where the selected values are not displayed correctly after the Accordion is closed and reopened. Instead of showing the actual selected values, the component may revert to displaying a placeholder like “1 selected”. This article provides a solution to ensure that the selected values remain visible even after the Accordion is toggled.

To maintain the display of selected values in the MultiSelect component when the Accordion is expanded or collapsed, you can utilize the refresh method of the MultiSelect component. This method should be called during the Accordion’s expanded event to ensure that the correct values are displayed.

Here is a code snippet demonstrating how to implement this solution:

<ejs-accordion #element expandMode="Single" (expanded)="expanded($event)">
    <e-accordionitems>
        <e-accordionitem> 
            <ng-template #header>
                <div>ASP.NET MVC</div>
            </ng-template>
            <ng-template #content>
                ...
                <ejs-multiselect id='multiselectelement' #multiselect [dataSource]='sportsData' [fields]='fields' [mode]='mode' [placeholder]='placeholder' [value]="dataSetValueList">
                </ejs-multiselect>
            </ng-template>
        </e-accordionitem>
    </e-accordionitems>
</ejs-accordion>

import { Component, ViewChild } from '@angular/core';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ExpandEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    @ViewChild('multiselect') multiselect?: MultiSelectComponent;

    public expanded(e: ExpandEventArgs) {
        this.multiselect.refresh();
    }
}

Sample Application

You can view a working example of this implementation at the following link: StackBlitz Example.

Additional References

• Accordion Documentation