Trouble with Searching by String in Dropdown List within Angular Component Using DevExtreme

Question

Issue Description:

I am encountering an issue where the search functionality within a dropdown list, implemented using DevExtreme's dx-data-grid and dxo-lookup components in an Angular application, does not work as expected. Despite setting searchEnabled to true, typing a specific string of characters into the dropdown does not filter or search through the list items.

html component

<dxi-column dataField="Person1" caption="Person 1" [allowEditing]="true">
  <dxo-lookup [dataSource]="peopleDataSource"
              valueExpr="Login"
              displayExpr="Name"
              searchEnabled="true"></dxo-lookup>
</dxi-column>

TypeScript Component:

In the component, 'peopleDataSource' is set up as a 'CustomStore' with a load function that retrieves data asynchronously:

  constructor(
    this.peopleDataSource = new CustomStore({
     key: 'Login',
     load: () => this.wrapPromise(this.dataService.getPeopleDataSource()),
     byKey: (key) => this.wrapPromise(this.dataService.getPersonByKey(key))
});
}

private wrapPromise(observable: Observable<any>): Promise<any> {
  return new Promise((resolve, reject) => {
    const subscription = observable.subscribe({
      next: resolve,
      error: reject
    });
    this.subscriptions.push(subscription);
  });
}

TypeScript Service:

The 'getPeopleDataSource' method in the service fetches the list of people:

  getPeopleDataSource(): Observable<any[]> {
    return this.http.get<any[]>(`${this.apiUrl}/ADApi/GetPeople`, { 
  withCredentials: true });
  }


  getPersonByKey(key: string): Observable<any> {
    // Replace the URL with the correct endpoint to fetch a specific person by their login
    return this.http.get<any>(`${this.apiUrl}/ADApi/GetPersonByKey/${key}`, { withCredentials: true });
  }

Problem:

The dropdown list populates correctly with data, but typing in the dropdown does not initiate a search or filter the list based on the typed characters.

Question:

• Is there an additional configuration required to enable proper search functionality within dxo-lookup components in DevExtreme?

• Could there be a misunderstanding on how searchEnabled works, or is there a potential issue with how the data is loaded or presented in the dropdown? Any advice or insights on enabling search functionality within this setup would be greatly appreciated.

Answer 1

Whenever you search in the dropdown, the load method of peopleDataSource is being called. You can use the loadOptions from the load method to implement your search logic. This way you can filter your data in the backend.

Something like this: load: (loadOptions) => this.wrapPromise(this.dataService.getPeopleDataSource(loadOptions.searchExpr, loadOptions.searchValue))

Link to documentation of customstore: https://js.devexpress.com/Angular/Documentation/ApiReference/Data_Layer/CustomStore/

link to documentation of loadOptions: https://js.devexpress.com/Angular/Documentation/ApiReference/Data_Layer/CustomStore/LoadOptions/