Choosing or setting the query string parameter in AutoComplete control | Angular

[Ervin van der Merwe]

Hi,

I'm trying to call our we API that accepts one query string parameter (e.g. endpointURL/Controller/Method/{QueryString}).

The documentation example uses the Query object and sends default query string parameters 'top' and 'filter'.

I want to send a single custom query string.

I've tried using:

query:Query = new Query();

query.params = [{

        key: 'EmployeeNo',

        value: '1234'

      }];

But the defualt 'top' and 'filter' remain in the query string parameter.

Is it possible to use/send custom query string parameter to the endpoint using Angular AutoComplete control?

Thanks!

[Berly Christopher]

Hi Ervin, 

  

Greetings from syncfusion support.  

  

We have checked the reported requirement. We cannot able to customize the query while using DataManger along with the adaptor. However, we can pass the additional parameter to the server using addParams method. Kindly refer the below code,  

  

public onFiltering(e){ 

        var dropdown_query = new Query(); 

        dropdown_query = (e.text !== '') ? dropdown_query.where('Name', 'startswith', e.text, true).addParams('additionalParams', '1') : dropdown_query; 

        e.updateData(this.data, dropdown_query); 

    } 

 

  

Please find the sample from the below link. 

Front end sample link: https://stackblitz.com/edit/angular-pvrfs5?file=app.component.html 

Back end sample link: https://www.syncfusion.com/downloads/support/forum/154440/ze/AutoComplete_backend-1656300937  

  

Please find the screenshot for the added parameter received in the backend.  

  

 

  

Regards, 

Berly B.C 

[Ervin van der Merwe]

Hi, thanks for the reply.

I am able to hit the API method with data returned in the Response, but no data is present in the list.

      ac_requesteeQuery: Query = new Query();

      ac_requesteeField: Object = { value: 'NameCalled' };

      this.data = new DataManager({

        url: `${endpoints.endpoint}/Employee/Search/`,

        adaptor: new WebApiAdaptor,

        crossDomain: true,

        headers: [{

            'authheaders': "Bearer " + a.BearerToken,

           // ....          

          }]

      });

  On_ac_requesteeFiltering(event: FilteringEventArgs): void {

    let query = new Query();

    if (event.text !== '') {

      query = query

        .addParams('SearchQuery', event.text);

      event.updateData(this.requestees, query);

    }

<ejs-autocomplete [dataSource]='data' [fields]='ac_requesteeField' [query]='ac_requesteeQuery'

                                            (filtering)="On_ac_requesteeFiltering($event)" 

                                            placeholder="my placeholder" floatLabelType="Always" [sortOrder]='Ascending'></ejs-autocomplete>

Should I be using the data adapter to show data in the list?

[Berly Christopher]

Hi Ervin, 

  

Based on the provided code example, we suspect that the reported issue may be caused due to data returned from the back end is not received properly and updated to the component. If the count in the back end will be 0 means, the data will not bound to the component. So, please share the below details that will help us to check and proceed further at our end. 

  

1.        Please share the code example or screenshot that how will data returned in the back end like in the below screenshot. 

 

2.        And provided data will be loaded in the response tab in the network path. Based on that we will find the data are loaded or not in the application. 

 

3.        Issue reproducing sample with back end else modify the provided sample with reported issue. 

4.        Code example of data handled in the back end. 

  

Regards, 

Berly B.C 

[Ervin van der Merwe]

Hi thanks for the reply. Let me know if this is sufficient.

Breakpoint

Response

[Berly Christopher]

Hi Ervin, 

  

A support incident has been created under your DT account for better follow-up. Please log on to our support website to check for further updates  

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac 

  

Regards, 

Berly B.C