How to set initial value

[Martin Sato]

Hi,

   I have a blazor WASM, and I have the ff mark up:

Client Markup

<SfAutoComplete TValue="object" TItem="TblLabTemplateMaster"

                                Text="@model.LABNAME"

                                @bind-Value="@model.LAB_INDEXER"

                                AllowFiltering="true"

                                MinLength=3

                                FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                                Query="@RemoteDataQuery"

                                IgnoreCase="false"

                                Highlight="true"

                                @ref="txtAutoComplete" 

                                ID="txtLab"

                                Placeholder="Select lab">

                    <SfDataManager Url="labs/getlabtemplates" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

                    <AutoCompleteFieldSettings Text="Templatename" Value="Indexer"></AutoCompleteFieldSettings>

                    <AutoCompleteEvents TItem="TblLabTemplateMaster" TValue="object" OnValueSelect="selectChange"></AutoCompleteEvents>

                </SfAutoComplete>

And here is my controller

 [HttpGet("getlabtemplates")]

        public object GetLabTemplates()

        {

            IQueryable<Shared.Models.TblLabTemplateMaster> data = _context.TblLabTemplateMasters.AsQueryable();

            var count = data.Count();

            var queryString = Request.Query;

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

            {

                StringValues Skip;

                StringValues Take;

                StringValues filter;

                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();

                string sFilter = (queryString.TryGetValue("$filter", out filter)) ? filter[0].ToString() : "";

                var aFilter = sFilter.Split('\'');

                return new

                {

                    Items = data.Where(p => EF.Functions.Like(p.Templatename, "%" + aFilter[1] + "%"))

                            .Skip(skip)

                            .Take(top),

                    Count = count

                };

            }

           

            else

            {

                return data.Where(p => p.Templatename == DateTime.Now.ToString());

            }

        }

What I want is to set initial value of the autocomplete, how to do it properly?

Thank you.

[Berly Christopher]

Hi Martin, 

We can directly given the required value which is needs to be displayed in the component with help of using bind-value attribute. We have prepared the sample by setting the initial value in the web API adaptor and attached it below, 

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

 

Regards, 

Berly B.C 

[Martin Sato]

Hi Martin, 

We can directly given the required value which is needs to be displayed in the component with help of using bind-value attribute. We have prepared the sample by setting the initial value in the web API adaptor and attached it below, 

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

 

Regards, 

Berly B.C 

Hi,

  I have modified the mark up as ff:

<SfAutoComplete TValue="int?" TItem="Orders" Placeholder="Select a Employee" 

                AllowFiltering="true" @bind-Value="@AutoVal">

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

    </SfDataManager>

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

</SfAutoComplete>

And in the controller, the filter field becomes OrderID, how can I still make it CustomerID and I want the value to become OrderID, pls see below:

Thanks.

[Berly Christopher]

Hi Martin, 

We would like to inform you that, the AutoComplete component filters the value based on the value mapped in the Value field. Due to this, you have received the OrderID as a filtering field in the controller since AutoComplete filters the value based on the value field alone. Please find the KB link to know more about this. 

https://www.syncfusion.com/kb/10158/why-autocomplete-does-not-filter-using-text-field  

If you want to filter the data based on the CustomerID, then can change in the Filtering event with help of Filter method as mentioned in the below code example. Also, please share the use case for mapping different field for AutoComplete component that will help us to check and proceed further at our end. 

@page "/" 

@inject IJSRuntime JSRuntime; 

  

@using ClientHost.Data 

@using Syncfusion.Blazor 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Data 

  

<SfAutoComplete @ref="AutoObj" TValue="int" TItem="Orders" Placeholder="Select a Employee" AllowFiltering="true" @bind-Value="@AutoVal"> 

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

    </SfDataManager> 

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

    <AutoCompleteEvents TValue="int" TItem="Orders" Filtering="onFiltering"></AutoCompleteEvents> 

</SfAutoComplete> 

  

@code{ 

    SfAutoComplete<int, Orders> AutoObj; 

    public Query Query = new Query(); 

    public int AutoVal { get; set; } = 2; 

    public void onFiltering(FilteringEventArgs args) 

    { 

        args.PreventDefaultAction = true; 

        Query = new Query().Where(new WhereFilter() 

        { 

  

            Field = "CustomerID", 

  

            value = args.Text, 

  

            Operator = "startswith", 

  

            IgnoreCase = true 

  

        }).Take(10); 

        this.AutoObj.Filter(null, Query); 

  

    } 

} 

  

Regards, 

Berly B.C 

[Martin Sato]

Hi Martin, 

We would like to inform you that, the AutoComplete component filters the value based on the value mapped in the Value field. Due to this, you have received the OrderID as a filtering field in the controller since AutoComplete filters the value based on the value field alone. Please find the KB link to know more about this. 

https://www.syncfusion.com/kb/10158/why-autocomplete-does-not-filter-using-text-field  

If you want to filter the data based on the CustomerID, then can change in the Filtering event with help of Filter method as mentioned in the below code example. Also, please share the use case for mapping different field for AutoComplete component that will help us to check and proceed further at our end. 

@page "/" 

@inject IJSRuntime JSRuntime; 

  

@using ClientHost.Data 

@using Syncfusion.Blazor 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Data 

  

<SfAutoComplete @ref="AutoObj" TValue="int" TItem="Orders" Placeholder="Select a Employee" AllowFiltering="true" @bind-Value="@AutoVal"> 

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

    </SfDataManager> 

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

    <AutoCompleteEvents TValue="int" TItem="Orders" Filtering="onFiltering"></AutoCompleteEvents> 

</SfAutoComplete> 

  

@code{ 

    SfAutoComplete<int, Orders> AutoObj; 

    public Query Query = new Query(); 

    public int AutoVal { get; set; } = 2; 

    public void onFiltering(FilteringEventArgs args) 

    { 

        args.PreventDefaultAction = true; 

        Query = new Query().Where(new WhereFilter() 

        { 

  

            Field = "CustomerID", 

  

            value = args.Text, 

  

            Operator = "startswith", 

  

            IgnoreCase = true 

  

        }).Take(10); 

        this.AutoObj.Filter(null, Query); 

  

    } 

} 

  

Regards, 

Berly B.C 

Thank you, I will give it a try.

[Pon Geetha A J]

Hi Martin, 

  

Please try and let us know if you need any assistance. 

  

Regards, 

Geetha