How to use a custom query with DataManager?

[Mike Lorenz]

Hello:

I have a situation where I would like the autocomplete control to issue a query to the server, but it needs to be in a specific format. For instance, if I'm looking for customer starting with "abc", it might be:

GET "http://myserver.com/api/customers?startingWith=abc"

How can I set up the DataManager to issue a custom query like that?

Thanks in advance,

Mike

[Sevvandhi Nagulan]

Hi Mike,  

 

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, 

 

[App.vue] 

    var query = new Query(); 

    //frame the query based on search string with filter type. 

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

    //pass the filter data source, filter query to updateData method. 

    e.updateData(this.remoteData, query 

 

[Server side] 

public ActionResult UrlDatasource([FromBody]Data dm,string additionalParams)  

        {  

            var val = OrdersDetails.GetAllRecords();  

 

Also, You can the use the http get for getting the data and pass the text to params as like you have requested in the url. Kindly refer the below code, 

 

methods: {     

onFiltering: function(e) { 

        this.$http.get('https://ej2services.syncfusion.com/production/web-services/api/Employees', {params:{startingWith: e.text}}).then(function (response) { 

        var data = response.data; 

        this.remoteData = data.result; 

      },function (response) { 

          console.log(response.data) 

      }); 

  } 

 

Please find the screenshot below, 

 

 

 

Please find the sample below, 

 

Frond end sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart665772418 

 

Backend Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-797662363 

 

Regards,  

Sevvandhi N  

[Mike Lorenz]

Thank you for your reply. Unfortunately I cannot understand how to put any of it together because the code snippets you provided were too small, not providing enough context.

For instance, in the first snippet, what is 'e' & where is it defined? Is it the event object from an 'onFiltering' event?

I've tried using onFiltering, and while it does work for a custom query, I don't know how to properly update the autocomplete control with the data coming back from the server.

My data comes back with two fields I'm interested in: EntityId & EntityName.

I've done this:

e.updateData(result, null, { value: 'EntityName', text: 'EntityName' });

but that doesn't work right.

I've tried this:

let newdata = result.map(x => ({ 'id': x.EntityId, 'text': x.EntityName }));

e.updateData(newdata);

And that seems to make the autocomplete control work pretty well, but it never changes any of its properties, so my JavaScript code can't find out which item the user selected.

I would expect the 'text' and 'value' properties to be updated, but they are always undefined.

So, within the onFiltering event, how can I take the data coming back from the server and correctly plug it in to the autocomplete component?

Thanks,

Mike

[Sevvandhi Nagulan]

Hi Mike,  

 

We have get the data from the from the url and updated to the component using filtering event’s updateData method. Kindly refer the below code, 

 

        methods: { 

       onFiltering:function(e) 

        { 

            e.preventDefaultAction = true; 

            this.$http.get('https://services.odata.org/V4/Northwind/Northwind.svc/Customers', {params:{ startingWith: e.text} }).then(function(response) { 

                var data = response.data; 

                var query = new Query(); 

                query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query; 

                e.updateData(data.value, query); 

            },function(response) { 

                console.log(response.data) 

        }); 

        } 

    } 

 

Please find the sample below, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart1543983086 

 

 

Regards,  

Sevvandhi N