Favorites items in dropdownlist

[Ciprian-Catalin]

Hi guys,

I have an dropdownlist configured with this code:

 <ejs-dropdownlist #drpDestinazione

                            placeholder="Organizzazione/Filiale Destinazione"

                            floatLabelType="Auto"

                            name="destinazione"

                            [fields]="fields"

                            formControlName="destinazione"

                            cssClass="e-outline e-small"

                            [dataSource]="orgData"

                            [allowFiltering]="true"

                            (filtering)='onDropdownFiltering($event, orgData)'>

                            <ng-template #itemTemplate let-data>

                                <div class='custom-item'>

                                    <span>{{ data.name }}</span>

                                    <span class='favorite-icon'>

                                        <a (click)='toggleFavorite(data)' role="button">

                                            <img *ngIf='data.isFavorite' src='assets/icons/filled-star.png' alt='Filled Star' class='float-end'>

                                            <img *ngIf='!data.isFavorite' src='assets/icons/empty-star.png' alt='Empty Star' class='float-end'>

                                        </a>

                                    </span>

                                </div>

                            </ng-template>

                        </ejs-dropdownlist>

When i am enabling filtering on dropdown the select of the favorites doesn't work properly. If i delete these 2 lines all is ok: 

[allowFiltering]="true"

(filtering)='onDropdownFiltering($event, orgData)'

Problems that appear:

1) When i open the dropdownlist and i set some items as favorite, after close the dropdown, when i am opening again seem the values are lost.

2) If i enter in edit mode and select an item in the dropdown and after i want to set some favorites, when i click on the star the dropdown select the item and close. I am expecting to set the favorite without close the dropdown.

Method that i call when click on favorite is this:

toggleFavorite(item: any) {

    item.isFavorite = !item.isFavorite;

  }

Can you please provide an solution for this problem?

[Kokila Poovendran]

Hi Ciprian-Catalin,

Greetings from the Syncfusion support team!

Thank you for reaching out to us with your concerns regarding the behavior of your dropdownlist. After carefully reviewing your query, we recommend considering the use of our SfMultiselect component to address your specific requirements. This component allows you to select multiple items and save them to your favorites list.

Let's address your specific issues:

Query 1: "When I open the dropdownlist and I set some items as favorite, after closing the dropdown, when I open it again, it seems the values are lost."

For this issue, please note that when you close the dropdown list, the selected values are not lost. They are maintained in the input section, making it easy for you to retrieve the selected values through the change event. You can find detailed information about the change event in our API documentation here: SfMultiselect Change Event.

Query 2: "If I enter edit mode and select an item in the dropdown and afterward want to set some favorites, when I click on the star, the dropdown selects the item and closes. I am expecting to set the favorite without closing the dropdown."

To address this issue, we suggest using the "closePopupOnSelect" property and setting it to "false." By doing so, the popup will not close when you select items in the dropdown list. You can find more information about this property in our API documentation here: closePopupOnSelect Property.

To help you better understand these recommendations, we've created a simple sample that demonstrates the desired behavior of the multiselect component. You can access the sample here: Multiselect Behavior Sample.

Documentation: https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/default

Should you have any further questions or require additional assistance, please do not hesitate to reach out to us. 

Regards,

Kokila Poovendran.

[Ciprian-Catalin]

Ok, thank you!