(Virtualization) Selected item is not pre-selected when dropdown is open

[Issam DANO]

Hi, 

I have a country dropdown list bound to DataManager/WebApi. Virualization and filtering is enabled as well:

I search for a country which is located in a non-loaded page, say a country starting with "unit":

I select a country from the result:

If I open the dropdown list, the selected item above is not preselected and its page is not loaded:

If I select an item from the loaded page, the selected item is pre-selected when dropdown is opened :

Here is the backend result structure:

{

    "result": [

        {

            "id": 4,

            "label": "Afghanistan",

            "code": "AFG"

        },

        {

            "id": 5,

            "label": "Albania",

            "code": "ALB"

        }

],

    "count": 2

}

Could someone help, please ?

Here is the code:

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

import { enableRipple } from '@syncfusion/ej2-base'

import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'

import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

enableRipple(true);

@Component({

  selector: 'app-root',

  standalone: true,

  imports: [DropDownListModule],

  providers: [],

  template: `<ejs-dropdownlist  #keySelect id="country" [dataSource]="dataManager" allowObjectBinding="true"

            [fields]="{text: 'label'}" [allowFiltering]="true" filterBarPlaceholder="Search..." [enableVirtualization]="true"

            popupHeight="300px" (filtering)="onFiltering($event)">

            </ejs-dropdownlist>`,

})

export class AppComponent implements OnInit {  

 

  dataManager: DataManager;

  constructor(){}

  ngOnInit() {    

    this.dataManager = new DataManager({

      url: `http://localhost:8080/data/countries`,

      adaptor: new WebApiAdaptor,

      crossDomain: true,

    });

  }

  public onFiltering(e: any): void {

    if (e.text.length < 3) {

      e.updateData(this.dataManager);

    } else {    

      const filterQuery = new Query().where('key', 'equal', e.text, false);

      e.updateData(this.dataManager, filterQuery);

    }

  }  

}

[Priyanka Karthikeyan]

Hi Issam DANO,

 

Thank you for reaching out to us.

 

We have created a simple sample using the DropDownList with both virtualization and filtering enabled. When selecting a non-loaded item via search, reopening the dropdown, and scrolling through the popup, the selected value is properly retained in the list.

Please find the sample and a video illustration below for your reference:

 

 

Sample: https://stackblitz.com/edit/angular-ujp4kkqv-kzp6kxei?file=src%2Fapp.component.html

 

Kindly ensure that the text and value fields are correctly assigned. If you continue to experience the issue, please modify the shared sample to match your scenario or provide us with a reproducible sample along with the steps to replicate the issue. This will help us better understand and assist you effectively.

 

We appreciate your time and cooperation. Please let us know if you need any further assistance.

Regards,

Priyanka K

[Issam DANO]

Thank you Priyanka. 

 I confirm that the selected item is preselected when I scroll down towards the item's page. 

However, I needed to scroll and for user-experience, it would be perfect to pre-load the item's page so the user will not scroll down. I would be grateful if you can suggest a workaround to pre-load the item's page otherwise I will keep this behavior as is.

Thanks in advance,

Sam

[Priyanka Karthikeyan]

Hi Issam DANO,

Thank you for your patience. We have considered “Need to provide a support for automatically scrolling to the selected item when the popup is opened” as a uncertain feature request from our end and logged the report for the same and the fix will be included with any of our upcoming releases.

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link:

 

Feedback link:https://www.syncfusion.com/feedback/65452/need-to-provide-a-support-for-automatically-scrolling-to-the-selected-item-when

Regards,

Priyanka K