We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use a custom query with DataManager?

Thread ID:

Created:

Updated:

Platform:

Replies:

150086 Dec 19,2019 09:20 PM UTC Dec 23,2019 09:23 AM UTC Vue 3
loading
Tags: AutoComplete
Mike Lorenz
Asked On December 19, 2019 09:21 PM UTC

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 [Syncfusion]
Replied On December 20, 2019 08:38 AM UTC

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, 
 
 
 
Regards,  
Sevvandhi N  


Mike Lorenz
Replied On December 20, 2019 03:12 PM UTC

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 [Syncfusion]
Replied On December 23, 2019 09:23 AM UTC

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, 
 
 
 
Regards,  
Sevvandhi N  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon