Pass custom parameters to remote API

[Jeremy]

HI, I have got pretty close to getting the AutoComplete to work but not quite.

I want to be able to perform a search on two values (not just one) and trying to pass the AutoComplete text to an API call, which can do my custom database query.

so far I have ...

 <SfAutoComplete @ref="autoObj" TValue="string" TItem="CustomerDTO" Placeholder="Select a customer" MinLength=2 Query="@RemoteDataQuery">

        <SfDataManager Url="https://localhost:5010/api/Customers/Search" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>

        <AutoCompleteEvents Filtering="OnFiltering" TValue="string"></AutoCompleteEvents>

        <AutoCompleteTemplates TItem="CustomerDTO">

          <ItemTemplate>

            <span>

              <span class='name'>@((context as CustomerDTO).Name)</span>

              <span class='code'>@((context as CustomerDTO).Code)</span>

            </span>

          </ItemTemplate>

        </AutoCompleteTemplates>

        <AutoCompleteFieldSettings Value="Code"></AutoCompleteFieldSettings>

      </SfAutoComplete>

 public async Task OnFiltering(FilteringEventArgs e)

  {

    e.PreventDefaultAction = true;

    RemoteDataQuery = new Query().AddParams("param", e.Text);

    await this.autoObj.Filter(customerData, RemoteDataQuery);

  }

 public class CustomerDTO

  {

    public int Id { get; set; }

    public string Code { get; set; }

    public string Name { get; set; }

  }

This generates the following API URL

https://localhost:5010/api/Customers/Search?$skip=0&$top=20&param=HU

but all I want the API query to be is

https://localhost:5010/api/Customers/Search/HU (where HU was the text I entered into the autocomplete box) which will return me the list of CustomerDTO objects that I need to populate the list.

How do I adjust the API query to achieve what I need please?

Thanks,
Jeremy

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jeremy, 

Greetings from Syncfusion support.

We have checked your query. We would like to inform that you can customize the query using custom adaptor. You can send the additional parameters in the filtering event and you can able to get those parameters as  key value pair in ReadAsync() method of Datamanager where you can send your request to the desired service. Please find the UG and sample link below for your reference.


Screenshot:


 

 

UG Link:

1. https://blazor.syncfusion.com/documentation/data/adaptors/#writing-custom-adaptor 

2. https://blazor.syncfusion.com/documentation/data/custom-binding/ 

3. https://blazor.syncfusion.com/documentation/autocomplete/data-source/#custom-adaptor


Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteCustomAdaptor-115623557

Regards,
Jeyanth. 

[Mounika]

Hi team,

I want to do a API search based on the Param text value entered in the Autocomplete using WebApiAdaptor instead of getting all the records and then filtering on the client side so that the API call faster(Even with large amounts of data) .Is it possible? custom adaptor cannot be used as it is getting all the records first and then filtering.

https://localhost:5010/api/Customers/Search/HU  this is what API query should be on each type we type the text in Autocomplete and perform the search using the entered text as parameter but using WebApiAdaptor.

[Berly Christopher]

Hi Mounika, 

  

Query 1: 

  

I want to do a API search based on the Param text value entered in the Autocomplete using WebApiAdaptor instead of getting all the records and then filtering on the client side so that the API call faster(Even with large amounts of data) .Is it possible? custom adaptor cannot be used as it is getting all the records first and then filtering. 

  

Response: 

  

We would like to inform you that we can display the result based on the typed text in the AutoComplete component in the server-side with web API adaptor. In the below attached sample, we have got the typed text value in the variable named as “filtervalue”. You can use it for the application needs at your end. 

  

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

  

 

<SfAutoComplete TValue="string" TItem="Orders" Placeholder="Select a Employee" AllowFiltering="true"> 

    <SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"> 

    </SfDataManager> 

    <AutoCompleteFieldSettings Value="CustomerID" Text="CustomerID" /> 

</SfAutoComplete> 

[HttpGet] 

        public async Task<object> Get(int? code) 

        { 

            if (order.Count == 0) 

            { 

                BindDataSource(); 

            } 

            var data = order.AsQueryable();             

            var queryString = Request.Query;   

            string filter = queryString["$filter"]; 

            string auto = queryString["$inlineCount"]; 

            if (filter != null) // to handle filter opertaion 

            { 

                var newfiltersplits = filter; 

                var filtersplits = newfiltersplits.Split('(' , ')', ' ', '\''); 

                var filterfield = filtersplits[4]; 

                var filtervalue = filtersplits[2]; 

 

                if (filtersplits.Length == 7) 

                { 

                    if (filtersplits[2] == "tolower") 

                    { 

                        filterfield = filter.Split('(', ')', '\'')[3]; 

                        filtervalue = filter.Split('(', ')', '\'')[5]; 

                    } 

                } 

                switch (filterfield) 

                { 

                    case "CustomerID": 

                        data = (from cust in data 

                                where cust.CustomerID.ToLower().StartsWith(filtervalue.ToString()) 

                                select cust); 

                        break; 

                } 

            } 

            if (queryString.Keys.Contains("$inlinecount")) 

            { 

                StringValues Skip; 

                StringValues Take; 

                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; 

                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); 

                var count = data.Count(); 

                return new { Items = data.Skip(skip).Take(top), Count = count }; 

            } 

            else 

            { 

                return data; 

            } 

        } 

 

  

Regards, 

Berly B.C